Quote:
Originally Posted by Falkor
But it always renders the image at the same size. If I change the height of the div to 20vh, the div gets smaller, but the image doesn't.
|
Ahhh. You don't want a full screen image but a half screen image (or whatever) by reducing the height of the div. Ok. Set the height of the svg wrapper instead of setting the height to the div, something like:
Code:
<div style="text-align: center; padding: 0pt; margin: 0pt; background: lightblue">
<svg style="height: 20vh; border: 1px solid red; box-sizing: border-box" xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 960 1207" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image width="960" height="1207" xlink:href="../Images/picture.jpg"/>
</svg>
</div>