Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 03-24-2013, 08:23 PM   #1
srascal
Epubs for Cylons
srascal began at the beginning.
 
srascal's Avatar
 
Posts: 13
Karma: 10
Join Date: Mar 2013
Device: Kindle Fire
Unhappy 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
srascal is offline   Reply With Quote
Old 03-24-2013, 09:24 PM   #2
Turtle91
Guru
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 669
Karma: 3807234
Join Date: Dec 2012
Location: Shannon, Ireland today
Device: iPhone 5/iPad 1&2/Surface Pro/Kindle PW
Have you tried:
img {
max-width: 100%;
max-height: 100%
}
Turtle91 is offline   Reply With Quote
Old 03-25-2013, 01:09 AM   #3
neufsix
Connoisseur
neufsix can extract oil from cheeseneufsix can extract oil from cheeseneufsix can extract oil from cheeseneufsix can extract oil from cheeseneufsix can extract oil from cheeseneufsix can extract oil from cheeseneufsix can extract oil from cheeseneufsix can extract oil from cheese
 
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.
neufsix is offline   Reply With Quote
Old 03-25-2013, 02:36 AM   #4
dgatwood
Curmudgeon
dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.
 
Posts: 313
Karma: 1028382
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.
dgatwood is offline   Reply With Quote
Old 03-25-2013, 04:58 AM   #5
Turtle91
Guru
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 669
Karma: 3807234
Join Date: Dec 2012
Location: Shannon, Ireland today
Device: iPhone 5/iPad 1&2/Surface Pro/Kindle PW
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.
Turtle91 is offline   Reply With Quote
Old 03-25-2013, 06:25 AM   #6
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 3,183
Karma: 7180223
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-300, PRS-T1
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.
Toxaris is offline   Reply With Quote
Old 03-25-2013, 05:45 PM   #7
srascal
Epubs for Cylons
srascal began at the beginning.
 
srascal's Avatar
 
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.
srascal is offline   Reply With Quote
Reply

Tags
css, epub, image, preview, sony reader

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Image size in EPUB BobC Writer2ePub 3 03-29-2013 07:13 AM
Limiting image size in ePub eggheadbooks1 ePub 26 10-03-2012 02:21 PM
Image Size Control In Reader odt >> ePub Foothills Conversion 5 08-24-2012 10:58 AM
Image and Pixel size for Childrens Book in EPUB? Brittany Writers' Corner 1 09-27-2011 04:15 PM
Image Size for Sony reader 700 Hussein Sony Reader 9 12-10-2008 08:39 AM


All times are GMT -4. The time now is 10:05 PM.


MobileRead.com is a privately owned, operated and funded community.