MobileRead Forums - View Single Post

Derek R · 03-11-2013, 11:22 AM

What I was thinking of doing is creating new cover images for epubs with the actual pixel dimensions 800 x 1200 and use the svg wrapper on those (in place of fixed 600 x 800 I was making). I didn't mean - though probably didn't make clear - that I would use the 3/4 ratio on existing images that aren't exactly that ratio.

So, would the following code be what I am after?

Code:

<div>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 800 1200" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="1200" width="800" xlink:href="../Images/cover.jpg"></image>
    </svg>
</div>

And just going slightly off topic, I stopped using "height=" and "width=" attributes with images a while back because I thought they were deprecated. Would I be better to give the cover image a class and use "img {width: xxx; height: xxx;}"? Ditto for the svg tag?

03-11-2013, 11:22 AM	#12
Derek R Zealot Posts: 104 Karma: 20 Join Date: Jun 2011 Location: County Down, Northern Ireland Device: none	What I was thinking of doing is creating new cover images for epubs with the actual pixel dimensions 800 x 1200 and use the svg wrapper on those (in place of fixed 600 x 800 I was making). I didn't mean - though probably didn't make clear - that I would use the 3/4 ratio on existing images that aren't exactly that ratio. So, would the following code be what I am after? Code: <div> <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 800 1200" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"> <image height="1200" width="800" xlink:href="../Images/cover.jpg"></image> </svg> </div> And just going slightly off topic, I stopped using "height=" and "width=" attributes with images a while back because I thought they were deprecated. Would I be better to give the cover image a class and use "img {width: xxx; height: xxx;}"? Ditto for the svg tag? Last edited by Derek R; 03-11-2013 at 12:02 PM.