View Single Post
Old 01-26-2013, 12:42 AM   #27
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 38,804
Karma: 19656443
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 1, iPhone 5
Quote:
Originally Posted by Kayto View Post
Okay, I've had a bit of success using the following code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cover</title>
<style type="text/css">
html, body { margin: 0; padding: 0; }
svg { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
</style>
</head>

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

Still have a problem though. The image is now sitting at the bottom of the e-reader screen with about 25% white space above it. It did manage to fill out in width though, which is great.

Any advice as to why it's still not filling out the screen?
Code:
<?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" xml:lang="en">
<head>
  <title>Cover</title>
<style type="text/css">
@page {padding: 0pt; margin:0pt}
            body { text-align: center; padding:0pt; margin: 0pt; }
</style>
</head>

<body>
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 590 750" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="750" width="590" xlink:href="../Images/cover_image.jpg"></image>
    </svg>
  </div>
</body>
</html>
Compare my code with your code and you can see where your CSS code may not be correct. My code works with ADE and Blufire.
JSWolf is offline   Reply With Quote