I have several images that are around 600x800 pixels that when viewed in an ePub app like ADE or Sony Reader get cut off. Setting the height to 100% solves that problem.
However, I have several images that are smaller than the screen size of the average ereader but too wide to fit in a mobile app, for example. If I set them to 100% so they are not cut off on a mobile app, they are then upsized in a larger device or computer app and look like crap.
What I want is to contain the 100% height or width to the maximum of the image's native pixel dimensions so that small screens will not cut off the images and larger screens will not uprez them.
Having read a few posts I thought wrapping them in an SVG container would do the trick (I thought perhaps the "viewBox" referred to a container of sorts), but when tested in ADE, Nook for PC, Sony reader for PC, and Aldiko on Android, there was no difference between using the SVG container and simply setting the height to 100%. My small images are still uprezzing past their native dimensions.
In other words, there was no difference between this (the native code after inserting the image in Sigil with the height value added):
Code:
<p class="sgc-1"><img alt="" height="100%" src="../Images/1_Bookmark.jpg" /></p>
and this:
Code:
<div>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 293 333" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="333" width="293" xlink:href="../Images/1_Bookmark.jpg"></image>
</svg>
</div>
I also read you can set max-height or max-width but not only does it not work to limit the image size, some of the images become distorted.
Is there a way to do what I want?