Image Size CSS for Sony Reader epub?

srascal · 03-24-2013, 07: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, 08:24 PM

Have you tried:
img {
max-width: 100%;
max-height: 100%
}

neufsix · 03-25-2013, 12:09 AM

The safest way seems to be a SVG wrapper.

dgatwood · 03-25-2013, 01:36 AM

Agreed. SVG seems to work well. Anything else is just begging to run into CSS compliance bugs.

Turtle91 · 03-25-2013, 03: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, 05: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, 04: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.

03-24-2013, 07:23 PM	#1
srascal 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

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

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

03-24-2013, 08:24 PM	#2
Turtle91 A Hairy Wizard Posts: 3,093 Karma: 18727053 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 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
neufsix 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
dgatwood 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
Turtle91 A Hairy Wizard Posts: 3,093 Karma: 18727053 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 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
Toxaris 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
srascal 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.

Advert

Advert