@Odedta, your code was interesting, but it will distort the image if the screen size does not exactly match the image ratio. That would work, though, for some abstract designs, etc. I will keep that one in my back pocket for future use. Thanks.
I wanted some background color around all edges, instead of the image butting right up against the frame on two sides.
This did not work for me:
Code:
<head>
<title>cover</title>
<style type="text/css">
@page {margin: 0; padding: 0; border-width: 0; }
body {margin:0; padding: 0; border-width: 0;
}
div {
text-indent: 0em;
text-align: center;
}
</style>
</head>
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" height="99%" width="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1024 1457" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="1457" width="1024" style="border-width:5px; border-style:solid; border-color:black" xlink:href="../Images/coverET.jpg"/>
</svg>
</div>
</body>
I ended up using the following, which sets the div with a black background color, and adjusting the viewport size and alignment.
Code:
<head>
<title>cover</title>
<style type="text/css">
@page {margin: 0; padding: 0; border-width: 0; }
body {margin:0; padding: 0; border-width: 0;
}
div {
text-indent: 0em;
text-align: center;
background-color: black;
}
</style>
</head>
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" height="99%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="-30 -30 1084 1497" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="1457" width="1024" xlink:href="../Images/coverET.jpg"/>
</svg>
</div>
</body>