Quote:
Originally Posted by DNSB
My preference is to use an SVG wrapper for all images. Instead of an line such as below:
Code:
<img alt="Cover" src="../Images/cover.jpeg" width="594" height="793" />
I would use:
Code:
<style type="text/css">
@page {padding: 0pt; margin:0pt}
body { text-align: center; padding:0pt; margin: 0pt; }
</style>
</head>
<body class="nomargin">
<div class="svg_wrapper">
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 594 793" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="793" width="594" xlink:href="../Images/cover.jpg"></image>
</svg>
</div>
The nomargin and svg_wrapper are (probably) redundant in light of the @page styling but they are left over from when I was having fun using the <g> group tag when playing with rotating images.
Code:
.nomargin {
display: block;
margin: 0 0 0 0;
text-align: center;
}
.svg_wrapper {
display: block;
margin: 0 0 0 0;
padding: 0 0 0 0;
text-align: center;
}
The advantage to using an SVG wrapper is that the image will be displayed using as much as possible of the display area. The sizes in the viewbox, height and width are more the aspect ratio and not the image size. Using any representation of the image aspect ratio there works equally well -- 600, 800 or 3, 4 will give the same results.
Regards,
David |
That seems really interesting David. Can it be done in batch though?