Quote:
|
You're setting 100%, as the width/height, of the images? Not max-width, or max-height, but simply height:100%? So, you are setting the image to be 100% of the containing div, which is also 100%? (for the landscape images). Have you tried using max-width, to control what's happening with those landscape images?
|
Yes, not max height but a set value. We wanted the vertical images to be 50% of the screen size (these were at the start of chapters beneath the heading and a quote); only the cover was 100%. The horizontal images, also at chapter starts, were 100% width. So I created a div class that set the container size and then I created a class to set the image size in the container. Worked as expected in everything but Apple, because Apple ignores anything in the img tag.
I hadn't tried the double nest approach. If I understand correctly, you are creating another level of div so as to avoid the need to put a class in the img tag. Correct?
I loved the SVG wrapper but it doesn't work in iBooks, at least not in my experience. Books using the SVG wrapper still had images sometimes split over screens in iBooks. And the latest-generation Kobos also ignore it. Last year, when I published the latest edition of my self-pubbing book that has a lot of images, I put them in SVG wrappers as I had before and tested the ebook on the Arc -- got image distortion. SVG worked perfectly on my older-generation Kobo Touch, but out of luck with the Arc.