Quote:
Originally Posted by Slevin#7
May I ask, what is your solution to that? I haven't had any success with that and ended up putting the caption into the image as grafical part of it - not a very pretty solution.
|
This kinda works for me:
Code:
<figure>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 960 1207" preserveAspectRatio="xMidYMid meet"><image width="960" height="1207" xlink:href="../picture.jpg"/></svg>
<figcaption>This is a caption</figcaption>
</figure>
Code:
figure {
text-align: center;
-webkit-column-break-inside: avoid !important;
page-break-inside: avoid !important;
break-inside: avoid !important;
display:block;
}
figure > svg {
height:80vh;
width:100%;
}
figcaption {
height:18vh;
}
The trick was to not give the figure a height. That eliminated all kinds of issues.