[RbnJrg]

Originally Posted by ElMiko

Sorry, I wasn't clear: I didn't want a stretchy image... but I also don't want white space on top and bottom, so I was saying I'd have to think about which one I want LEAST since a perfect solution in epub2 sounds impossible.

You didn't try "preserveAspectRatio="xMidYMid slice"", otherwise you had realized that no white space is generated. If you see someone, is due to margins or paddings.

I looked at object-fit and it looks like scale-down is the value I'd need to use... except, from the description it looks like if it is forced to scale down, it created white space on top and bottom. Is that correct, or is that just a function of the example W3 chose?

Okay, there's something you need to be clear about:

1) If you define the height of an image and want the image to maintain its aspect ratio, then its width must be set to auto. In this case:
a) If the viewport width is insufficient to contain the image width, you'll see a truncated image.
b) If the viewport width is greater than the image width, then you'll see white space on the left and right sides.
c) The only way to avoid blank margins or overflows is for the viewport width to be equal to the image width.

2) If you don't define the height or width of an image, but rather define the width and height of the image container, if you want the image to maintain its aspect ratio, then:
a) an image inside an SVG wrapper will maintain its aspect ratio but will likely generate white space if you use:

preserveAspectRatio="xMidYMid slice"

b) an image inside an SVG container will maintain its aspect ratio and will not generate white space if you use:

preserveAspectRatio="xMidYMid slice"

Read the following to better understand the concept:

https://codepen.io/tigt/post/why-and...rveaspectratio

c) within epub3, the object-fit:contain property will necessarily create white space to maintain the image's aspect ratio unless the width and height of the containing block are equal to the width and height of the image.
d) the object-fit: cover property will occupy the entire container space, there will be no blank spaces, but the image will be distorted.

In your initial post you wrote:

In the Kindle OS, images with a fixed height (and no specified width) that would exceed the screen width are resized proportionally to fit the screen width. In other words the fixed height is functionally overwritten to fit the image proportionally to the screen if honoring it (proportionally) would result in the image's exceeding the screen width. Otherwise, the fixed height value is honored as long as the implied image width is less than the width of the screen.

Well, there's no way to do this without generating white space when the image's height is greater than its width. If the image's width is greater than its height, then the solution for epub2 based on an SVG container is the correct one, and it doesn't generate white space, unless it's due to margins or padding. And under epub3, the solution is even simpler: give the image "max-height: 4em" and "width: auto."

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula. Praesent orci dui, pulvinar id convallis a, faucibus non mauris. Donec tellus augue, tempus sed facilisis sed, fringilla quis leo.</p>

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

  <p>Mauris vulputate, leo ac facilisis vulputate, enim orci interdum augue, in blandit quam turpis quis dui. Morbi dictum luctus velit nec faucibus. Cras vitae tortor purus, ut tincidunt mauris. Sed at velit nisl. Donec eu mauris tortor, interdum condimentum erat. Nam egestas turpis eget nibh laoreet pharetra. Suspendisse a sem eros, ut pulvinar enim. In sed elit eu nulla accumsan tincidunt eget sit amet ipsum. Nullam ut massa rutrum dolor placerat tempor accumsan eget purus.</p>

And the .css is:

.autoImg {
  text-indent: 0;
  max-height: 4em !important; /* Try changing here the max-height to 25em to see what happens*/
  width: auto !important;
  margin: 0;
}

.autoImg img {
  display: block;
  width: 100%;
  margin: 0;
}

See the attached epub with the solution for epub2 and epub3. Open the epub with any ereader and increase/decrease the width of the ereader to see how the image is displayed.