03-24-2013, 07:23 PM | #1 |
Epubs for Cylons
Posts: 13
Karma: 10
Join Date: Mar 2013
Device: Kindle Fire
|
Image Size CSS for Sony Reader epub?
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 |
03-24-2013, 08:24 PM | #2 |
A Hairy Wizard
Posts: 3,186
Karma: 18843349
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Have you tried:
img { max-width: 100%; max-height: 100% } |
03-25-2013, 12:09 AM | #3 |
Connoisseur
Posts: 57
Karma: 1010
Join Date: Jul 2011
Device: Archos A70 eReader, Kindle Touch, Sony PRS-T2
|
The safest way seems to be a SVG wrapper.
|
03-25-2013, 01:36 AM | #4 |
Curmudgeon
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
|
Agreed. SVG seems to work well. Anything else is just begging to run into CSS compliance bugs.
|
03-25-2013, 03:58 AM | #5 |
A Hairy Wizard
Posts: 3,186
Karma: 18843349
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
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. |
03-25-2013, 05:25 AM | #6 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
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.
|
03-25-2013, 04:45 PM | #7 |
Epubs for Cylons
Posts: 13
Karma: 10
Join Date: Mar 2013
Device: Kindle Fire
|
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. |
Tags |
css, epub, image, preview, sony reader |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Image size in EPUB | BobC | Writer2ePub | 3 | 03-29-2013 06:13 AM |
Limiting image size in ePub | eggheadbooks1 | ePub | 26 | 10-03-2012 01:21 PM |
Image Size Control In Reader odt >> ePub | Foothills | Conversion | 5 | 08-24-2012 09:58 AM |
Image and Pixel size for Childrens Book in EPUB? | Brittany | Writers' Corner | 1 | 09-27-2011 03:15 PM |
Image Size for Sony reader 700 | Hussein | Sony Reader | 9 | 12-10-2008 07:39 AM |