View Single Post
Old 08-15-2012, 01:02 AM   #1
eggheadbooks1
Connoisseur
eggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentametereggheadbooks1 can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
Posts: 97
Karma: 12798
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
Limiting image size in ePub

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?
eggheadbooks1 is offline   Reply With Quote