Quote:
Originally Posted by dgatwood
Ugh. My brain wasn't turned on when I wrote that.  |
Quote:
|
The SVG code I posted does, in fact, center the image, both vertically and horizontally. That's handled by the "mid" in preserveAspectRatio="xMidYMid". The containers are all styled to fill the body size, which in the absence of content that would overflow the bounds, fills the viewport. So by adding the image and telling it to scale to fit, centered, within that container, you're effectively centering within the viewport.
|
I agree with that. And you could use a code a bit simpler; try this:
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">
<head>
<title>Cover</title>
</head>
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
height="100%"
width="100%"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 2040 2640">
<image width="2040" height="2640" xlink:href="../Images/frontcover.jpg" />
</svg>
</div>
</body>
</html>
I added the parameter "meet" under "preserveAspectRatio" to ensure the image is centered both, vertical and horizontally. Read this post (also the thread is very interesting):
https://www.mobileread.com/forums/sho...4&postcount=20
Regards