Trying to figure out image ratio issue

rosshalde · 01-08-2015, 08:39 PM

I am using Sigil to create the epub.
I am viewing the final epub on both 6 inch e-reader and a much larger tablet.
I am trying to deal with an image issue to auto resize to fit the device.

Here is the code I am trying to use.

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="../Styles/Style0001.css" rel="stylesheet" type="text/css" />

<style type="text/css">
img { height:100%; width:100%;}
</style>
</head>

<body>
<div class="image"><img alt="Cover 2 Anne" height="1598" src="../Images/Cover%202%20Anne.jpg" width="1102" /></div>
</body>
</html>

The problem is it stretches the image in both directions, so I tried
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="../Styles/Style0001.css" rel="stylesheet" type="text/css" />

<style type="text/css">
img { height:100%; width:auto%;}
</style>
</head>

<body>
<div class="image"><img alt="Cover 2 Anne" height="1598" src="../Images/Cover%202%20Anne.jpg" width="1102" /></div>
</body>
</html>
but that seems to not help me either.

Any SIMPLE suggestions on fill in one direction only (whichever would come first) and then keeping the other dimension proportionate?

Toxaris · 01-09-2015, 01:52 AM

Use a SVG wrapper like the one Sigil provides with covers. That should fill up any screen with the correct ratio.

rosshalde · 01-09-2015, 07:38 AM

I tried this, but the resulting image was not clickable on the tablet.
The SVG wrapper that Sigil uses for its cover still produced a clickable final image even after conversion to AZW3 and viewed on a fire. The same code used for other images did not. Something about it being the cover makes it clickable.

rosshalde · 01-09-2015, 10:49 AM

Also, with the SVG, it looks great on the tablet, but terrible on the e-reader. I have the same image sized two different ways.

1) fills the height of an e-reader (700px)
2) the other is the true size (2400px)

On the e-reader the 700 looks "ok" and the 2400px only shows partly due to size
On the tablet, it must auto constrain images, because again the 700 looks "ok", but the 2400 looks amazing and is all there.

When I use the SVG tag as suggested it does constrain the larger image to show on the e-reader but the picture is not nearly as crisp. I am guessing because the screen of the e-reader simply can't deal with that big of pic...is that right?

So, I have two conflicting issues, the e-reader can only handle either the small image or the SVG image that looks junky
The tablet prefers the full pic in full glory.
Any suggestions how to move forward?

DomesticExtremis · 01-09-2015, 11:06 AM

Quote:

You seem to be overriding your style setting within the img tag.
Maybe try removing the highkighted bit.

rosshalde · 01-09-2015, 11:13 AM

Thank you, I caught that as well and that helps the resizing issue, but not the clarity issue on the e-reader of taking a huge pic and squishing it down to e-reader res size.

Toxaris · 01-09-2015, 11:22 AM

Quote:

Originally Posted by rosshalde

Thank you, I caught that as well and that helps the resizing issue, but not the clarity issue on the e-reader of taking a huge pic and squishing it down to e-reader res size.

Strange, I use this all the time and the reduced images are always crisp and clear if I resize via SVG. Resize via the img tag gives sub-par results. Perhaps a Nook issue?

rosshalde · 01-09-2015, 11:29 AM

I am using a Kobo Touch.

Here is the code

<body>
<div style="text-align: center; padding: 0pt; margin: 0pt;">
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 478 2498" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="2498" width="478" xlink:href="../Images/2014_12_29_16_13_06_1.jpg" /></svg>
</div>
</body>

It resizes the pic, and keeps the ratios right, but doesn't look very nice.

JSWolf · 01-09-2015, 11:34 AM

Please post an sample ePub with this image so others can possibly check this out.

rosshalde · 01-09-2015, 11:48 AM

I edited down the epub to 3 subfiles each with one pic.
The important file is "Test with SVG"

Pic 1. 700 height - Looks "ok" on Kobo and "ok on Fire
Pic 2. Full Height 2400 - Looks huge and doesn't fit on Kobo, looks good on Fire
Pic 3. The SVG code - Looks worse, but does fit on Kobo, looks good on fire

As you can see, this was a two page spread that I am turning sideways to give as much of the image as possible.

As a general rule, do tablets resize images to fit and e-readers do not?
Or is something happening in the Calibre conversion that is refitting these images.
I also did something that I hate doing, but seems to help sometimes
Epub to epub conversion on Calibre.
I attached that file as well. That is the file titled "Mary" with the same exact epub put through Calibre default settings.

theducks · 01-09-2015, 12:40 PM

Your (non SVG) img tag had height=, width=

IMHO either use a stylesheet for all your image style control on NONE in the stylesheet.
It is just too confusing when it could be in either or

both places

01-08-2015, 08:39 PM	#1
rosshalde Zealot Posts: 142 Karma: 10 Join Date: Jun 2014 Device: nook	Trying to figure out image ratio issue I am using Sigil to create the epub. I am viewing the final epub on both 6 inch e-reader and a much larger tablet. I am trying to deal with an image issue to auto resize to fit the device. Here is the code I am trying to use. <?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="../Styles/Style0001.css" rel="stylesheet" type="text/css" /> <style type="text/css"> img { height:100%; width:100%;} </style> </head> <body> <div class="image"><img alt="Cover 2 Anne" height="1598" src="../Images/Cover%202%20Anne.jpg" width="1102" /></div> </body> </html> The problem is it stretches the image in both directions, so I tried <?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="../Styles/Style0001.css" rel="stylesheet" type="text/css" /> <style type="text/css"> img { height:100%; width:auto%;} </style> </head> <body> <div class="image"><img alt="Cover 2 Anne" height="1598" src="../Images/Cover%202%20Anne.jpg" width="1102" /></div> </body> </html> but that seems to not help me either. Any SIMPLE suggestions on fill in one direction only (whichever would come first) and then keeping the other dimension proportionate?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Issue formatting page with only an image.	blutuu	ePub	31	12-27-2014 01:26 PM
image aspect ratio: where to add argument?	dsfgxnchjb	Conversion	4	10-10-2014 01:42 PM
Creator MPC Image Issue	meme_queen	Kindle Formats	2	08-29-2011 03:32 PM
PDFLRF figure split issue	confusednow	LRF	0	05-30-2011 05:37 AM
Cover image aspect ratio for mobi	Evildad	Conversion	4	01-27-2011 10:29 PM

01-09-2015, 01:52 AM	#2
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	Use a SVG wrapper like the one Sigil provides with covers. That should fill up any screen with the correct ratio.

01-09-2015, 07:38 AM	#3
rosshalde Zealot Posts: 142 Karma: 10 Join Date: Jun 2014 Device: nook	I tried this, but the resulting image was not clickable on the tablet. The SVG wrapper that Sigil uses for its cover still produced a clickable final image even after conversion to AZW3 and viewed on a fire. The same code used for other images did not. Something about it being the cover makes it clickable.

01-09-2015, 10:49 AM	#4
rosshalde Zealot Posts: 142 Karma: 10 Join Date: Jun 2014 Device: nook	Also, with the SVG, it looks great on the tablet, but terrible on the e-reader. I have the same image sized two different ways. 1) fills the height of an e-reader (700px) 2) the other is the true size (2400px) On the e-reader the 700 looks "ok" and the 2400px only shows partly due to size On the tablet, it must auto constrain images, because again the 700 looks "ok", but the 2400 looks amazing and is all there. When I use the SVG tag as suggested it does constrain the larger image to show on the e-reader but the picture is not nearly as crisp. I am guessing because the screen of the e-reader simply can't deal with that big of pic...is that right? So, I have two conflicting issues, the e-reader can only handle either the small image or the SVG image that looks junky The tablet prefers the full pic in full glory. Any suggestions how to move forward?

01-09-2015, 11:13 AM	#6
rosshalde Zealot Posts: 142 Karma: 10 Join Date: Jun 2014 Device: nook	Thank you, I caught that as well and that helps the resizing issue, but not the clarity issue on the e-reader of taking a huge pic and squishing it down to e-reader res size.

01-09-2015, 11:29 AM	#8
rosshalde Zealot Posts: 142 Karma: 10 Join Date: Jun 2014 Device: nook	I am using a Kobo Touch. Here is the code <body> <div style="text-align: center; padding: 0pt; margin: 0pt;"> <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 478 2498" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="2498" width="478" xlink:href="../Images/2014_12_29_16_13_06_1.jpg" /></svg> </div> </body> It resizes the pic, and keeps the ratios right, but doesn't look very nice.

01-09-2015, 11:34 AM	#9
JSWolf Resident Curmudgeon Posts: 73,998 Karma: 128903378 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	Please post an sample ePub with this image so others can possibly check this out.

01-09-2015, 12:40 PM	#11
theducks Well trained by Cats Posts: 29,809 Karma: 54830978 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	Your (non SVG) img tag had height=, width= IMHO either use a stylesheet for all your image style control on NONE in the stylesheet. It is just too confusing when it could be in either or both places

Advert

Advert