Variable/fixed image height

[RbnJrg]

Originally Posted by ElMiko

Sorry @RbnJrg, I've been away from my computer for a week, so haven't really had a chance to play around with this until now.

For the epub2, it doesn't honor a specific height (as the value there is set to "auto") making it ALWAYS 100% of the width of the window. (unless of course I change that value to Xem, in which case it runs the risk of the white space above and below if the screen is too narrow for the image)

By chance, did you open the last epub I uploaded?

For the epub3 solution, it's a little funkier still... Changing the max-height value doesn't seem to have any effect at all.

Of course! For that reason I told you to change the max-height to 25em, because the height will have the value to maintain the proportion; it wont have any effect even if you write max-height: 100em. Since you want your image is with a height of 4em, with "max-height: 4em", the height will be 4em or lower in order to maintain the proportion with the width.

In conclusion, and for an epub3:

With a xhtml code of:

  <p class="autoImg"><img alt="Hello" src="../Images/Hello.jpg"/></p>

and with styles of:

.autoImg {
  text-indent: 0;
  text-align: center;
  max-height: 4em !important;
  width: auto !important;
  margin: 0;
}

.autoImg img {
  max-width: 100%;
  margin: 0 auto;
  border: 1px solid red;
  display: block;
}

then:

a) if the window is narrower than would accommodate a 2em height and proportional width (e.g. the WINDOW width is equivalent to 11em), the image is shrunk to fit the screen width-wise, maintaining a proportional height (i.e. resulting in an image that functionally has a height of 1.8333em and a width of 11em).



b) if the window is wider than the proportional width of the image at a height of 2em (e.g. 14em wide), it will honor the 2em height with proportionaly width (resulting in 1em of white space to the left and right of the image).



c) if the window matches the proportional width of the image at the defined 2em height, it would would look like scenario a, except the image would be exactly 2em (as defined) rather than shrinking to fit the window.



I add a border to the image so you can understand better the things. As you can see, you have everything you asked for.

PS: I worked with a height of 4em (and not 2em) as you stated in one of your first posts.