View Full Version : Image Size CSS for Sony Reader epub?


srascal
03-24-2013, 08:23 PM
When I downloaded Reader Apps and tested my epub on it, the images in the book were all oversized and expanding past the page.

The images are indeed large, most 1200px W x 1800px H, but I use a CSS property of max-width: 600px. This fixes a similar oversized image problem on the Nook, but not when I preview the epub on Sony Reader Apps.

img {
max-width: 600px;
}

Does anyone know of a CSS property that will allow Sony Reader to shrink the images to scale?

Or, does anyone know if the Reader Apps software is accurate in displaying images? When I expand to full screen in Reader Apps, everything looks perfect. When Reader Apps is in compact mode, the images are blown up.

When I preview in ADE, the images are perfect, but of course ADE does not give you a good preview of how images will actually appear on a device.

I do not have any other CSS properties put on the images. I do not use Calibre or Sigil, only HTML and CSS. The images are sized so large in order to accomodate Kindle Fire HD 8.9; resizing each one is not an option.

Any help you could offer would be greatly appreciated! Thanks, Amy

Turtle91
03-24-2013, 09:24 PM
Have you tried:
img {
max-width: 100%;
max-height: 100%
}

neufsix
03-25-2013, 01:09 AM
The safest way seems to be a SVG wrapper.

dgatwood
03-25-2013, 02:36 AM
Agreed. SVG seems to work well. Anything else is just begging to run into CSS compliance bugs. :)

Turtle91
03-25-2013, 04:58 AM
I thought there were still some devices that did not support SVG?? Is that still true???

I haven't had any problems with img {max-width:100%;max-height:100%}...that limits the image to the screen size and keeps the proper ratio. For future devices that support CSS3 you could use the "contain" property which basically does the same thing.

Toxaris
03-25-2013, 06:25 AM
There is a difference in support. SVG as image wrapper is supported on all ePUB devices as far as I know. However, a real SVG image is something different. The support for the SVG language is not consistent across all readers.

srascal
03-25-2013, 05:45 PM
Update: the max-width: 100% and max-height: 100% worked great. The images now display correctly in Sony Reader App and Nook for Mac. Thank you very much, Turtle91!

I have stayed away from SVG tags in the past because of compatibility issues and my own general lack of knowledge. If you know of a good reference to learn about SVG in epub and mobi, please let me know.