Toxaris says:
Quote:
|
The real issues begin when you also want text under the pictures...
|
Actually, it is not so hard: change 'height' in the SVG wrapper to something like 90-95% (or more if there is a lot of text)
Code:
<div>
<svg xmlns="http://www.w3.org/2000/svg" height="95%" preserveAspectRatio="xMidYMid 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>
If you want to place your text on top, you can play with the viewBox values:
Code:
<div>
<svg xmlns="http://www.w3.org/2000/svg" height="95%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 -20 600 820" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="800" width="600" xlink:href="../Images/cover.jpg"></image>
</svg>
</div>
Actual values would depend on the amount of space you need for the text, but the image will not be distorted.