Quote:
Originally Posted by Kayto
How would I input the correct aspect ratio?
|
The following code does not use an SVG container and works perfectly for a cover image.
Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Among Others</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
</head>
<body style="margin-top:0px; margin-left:0px; margin-right:0px; margin-bottom:0px; text-align:center; background-color:#00007;">
<div><img alt="image" src="images/cover.jpg" style="height:100%"/></div>
</body>
</html>
The following code does use an SVG container and the numbers used are the actual number of the image.
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>