MobileRead Forums - View Single Post - ibooks

Turtle91 · 04-22-2013, 12:40 PM

That's certainly better, although I would put all styling (body, img, and div) in a CSS. I would also add a style definition for img to make sure it stays with the correct aspect ratio no matter the dimensions of the display:

Code:

body {margin:0; padding:0}
img {max-height:100%; max-width:100%}
div.cover{text-align:center; text-indent:0; margin:0 auto}

<body>
<div class="cover"><img alt="Omslag" src="../Images/omslag7f.jpg" /></div>
</body>

This will fill the display and keep proper aspect ratio as long as the image is larger than the display size to begin with. if you are trying to stretch an image to fill the screen then you either need to add a width/height:100%, or use an SVG wrapper, or even what I use:

Code:

h1[title=Cover] {display:none}

<body style="background:url(&quote;../Images/omslag7f.jpg&quote;)
 no-repeat fixed center center; 
background-size:contain">
<h1 title="Cover"></h1>
</body>

That works great but older/non-compliant readers might not display it properly...then again, older/non-compliant readers might not display SVG properly either! Also, to make matters worse, the new standard doesn't allow a % in the height/width setting of an image, only px. Gotta love it!

Cheers!

04-22-2013, 12:40 PM	#11
Turtle91 A Hairy Wizard Posts: 3,368 Karma: 20212733 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	That's certainly better, although I would put all styling (body, img, and div) in a CSS. I would also add a style definition for img to make sure it stays with the correct aspect ratio no matter the dimensions of the display: Code: body {margin:0; padding:0} img {max-height:100%; max-width:100%} div.cover{text-align:center; text-indent:0; margin:0 auto} <body> <div class="cover"><img alt="Omslag" src="../Images/omslag7f.jpg" /></div> </body> This will fill the display and keep proper aspect ratio as long as the image is larger than the display size to begin with. if you are trying to stretch an image to fill the screen then you either need to add a width/height:100%, or use an SVG wrapper, or even what I use: Code: h1[title=Cover] {display:none} <body style="background:url(&quote;../Images/omslag7f.jpg&quote;) no-repeat fixed center center; background-size:contain"> <h1 title="Cover"></h1> </body> That works great but older/non-compliant readers might not display it properly...then again, older/non-compliant readers might not display SVG properly either! Also, to make matters worse, the new standard doesn't allow a % in the height/width setting of an image, only px. Gotta love it! Cheers! Last edited by Turtle91; 04-22-2013 at 12:46 PM.