Full width images.

jayleavitt · 04-05-2013, 02:44 AM

I'm wanting to make a book that is very image heavy. Ideally it would have text that can be modified, but with images that are fixed width to the device.

It would stand to reason that one could attach images that exceed the typical width of the device and have it stretched down to match. Yet I have made a few test books (epub) with various sizes, from 600 to 2400px on the long side (all landscape oriented to accommodate fitting the screen with text above and below.

However the image scalings do not make sense whatsoever. One 600px image fits perfectly, yet a 920px only goes halfway to each side, a 1200 fits, but then 1800 gets half cut off, and a 2000px is the same small size as 920.

Any way to get things steady?

tested on android devices with 5 different readers.

Turtle91 · 04-05-2013, 03:04 AM

Try this in your css:
img {
max-width:100%;
max-height:100%;
width:100%
}

in the html:
<div><img alt="" src="..." /></div>

That will make ALL your images fill the width to the max extent possible while maintaining the correct aspect ratio.

If you have specific images that you want to behave differently, you can give them a specific class.
e.g.:
img.half {width:50%}
<div><img class="half" alt="" src="..." /></div>

Cheers!

jayleavitt · 04-05-2013, 03:24 AM

Hmmm.... still not behaving.

Preview on Sigil shows full width images - readers still have miniature and clipped images.

jayleavitt · 04-05-2013, 03:56 AM

Quote:

Originally Posted by Turtle91

in the html:
<div><img alt="" src="..." /></div>

Wrap each image in that div, or will a whole body wrap work?

Turtle91 · 04-05-2013, 05:25 AM

Quote:

Originally Posted by jayleavitt

Wrap each image in that div, or will a whole body wrap work?

??

Body wrap??

Do you mean:
<body><img alt="" src=""/></body>
Or
<body><img alt="" src=""/><img alt="" src=""/><img alt="" src=""/></body>

You usually want to have each image wrapped in a container - in this case a <div>. This will provide the easiest, most consistent way of presenting your work.

You can even make a clip of it and its really easy to add.
<body>
<div><img alt="" src=""/></div>
<div><img alt="" src=""/></div>
<div><img alt="" src=""/></div>
<div><img alt="" src=""/></div>
</body>

jayleavitt · 04-05-2013, 11:43 PM

Quote:

Originally Posted by Turtle91

??

Body wrap??

Sorry - it was really early, didn't notice that this was a typical image div, thought it was something else.

still acting up. Preview has everything set to 100% width, but readers still show everything all wonky, 900px images are smaller than 800px, 620px fill the screen, etc with no rhyme or reason.

Gonna be a long weekend.

Turtle91 · 04-06-2013, 12:27 AM

Can you post your CSS and a sample of the relevant HTML?

04-05-2013, 02:44 AM	#1
jayleavitt Junior Member Posts: 4 Karma: 10 Join Date: Apr 2013 Device: none	Full width images. I'm wanting to make a book that is very image heavy. Ideally it would have text that can be modified, but with images that are fixed width to the device. It would stand to reason that one could attach images that exceed the typical width of the device and have it stretched down to match. Yet I have made a few test books (epub) with various sizes, from 600 to 2400px on the long side (all landscape oriented to accommodate fitting the screen with text above and below. However the image scalings do not make sense whatsoever. One 600px image fits perfectly, yet a 920px only goes halfway to each side, a 1200 fits, but then 1800 gets half cut off, and a 2000px is the same small size as 920. Any way to get things steady? tested on android devices with 5 different readers.

04-05-2013, 03:24 AM	#3
jayleavitt Junior Member Posts: 4 Karma: 10 Join Date: Apr 2013 Device: none	Hmmm.... still not behaving. Preview on Sigil shows full width images - readers still have miniature and clipped images. Last edited by jayleavitt; 04-05-2013 at 03:50 AM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Images linked, 'Align' and 'Width' attributes	sebdea	Kindle Formats	2	01-17-2012 08:16 AM
How to center/fit page width SVG images with <OBJECT>	amoroso	ePub	0	07-31-2010 11:48 AM
Changing Margin Settings to use full width of the Screen???	JBlyth	Kobo Reader	9	07-05-2010 09:54 AM
Changing Margin Settings to use full width of the Screen	JBlyth	Kobo Reader	0	07-02-2010 10:31 PM
Full-Screen images on the K2?	Thorkin	Amazon Kindle	1	03-12-2009 07:48 PM

04-05-2013, 03:04 AM	#2
Turtle91 A Hairy Wizard Posts: 3,346 Karma: 20171571 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	Try this in your css: img { max-width:100%; max-height:100%; width:100% } in the html: <div><img alt="" src="..." /></div> That will make ALL your images fill the width to the max extent possible while maintaining the correct aspect ratio. If you have specific images that you want to behave differently, you can give them a specific class. e.g.: img.half {width:50%} <div><img class="half" alt="" src="..." /></div> Cheers!

04-06-2013, 12:27 AM	#7
Turtle91 A Hairy Wizard Posts: 3,346 Karma: 20171571 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	Can you post your CSS and a sample of the relevant HTML?

Advert

Advert