MobileRead Forums - View Single Post

Jellby · 06-29-2012, 03:36 AM

This is my standard cover code. In the <head> I have this style (and no CSS file linked in the cover XHTML):

Code:

<style type="text/css">
  body.cover { margin: 0; }
  div { text-align: center; }
</style>

And the <body>:

Code:

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

This should resize the image (keeping aspect ratio) to full width and/or height (but that may depend on how the reader interprets 100% height). The class="cover" in the <body> simply helps me style different the cover page when using Prince. (I guess I should add "@page { margin: 0; }" to the style too.)

06-29-2012, 03:36 AM	#7
Jellby frumious Bandersnatch Posts: 7,557 Karma: 19500001 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	This is my standard cover code. In the <head> I have this style (and no CSS file linked in the cover XHTML): Code: <style type="text/css"> body.cover { margin: 0; } div { text-align: center; } </style> And the <body>: Code: <body class="cover"> <div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 600 800" preserveAspectRatio="xMidYMid meet"> <image width="600" height="800" xlink:href="images/Cover.jpg" /> </svg> </div> </body> This should resize the image (keeping aspect ratio) to full width and/or height (but that may depend on how the reader interprets 100% height). The class="cover" in the <body> simply helps me style different the cover page when using Prince. (I guess I should add "@page { margin: 0; }" to the style too.)