Quote:
Originally Posted by Falkor
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. |
Really? Did you try to open your epub for example under Foliate (to name one of the problematic ereaders) by employing that trick? At least you need to give a "height: 100%" for the <figure> tag. That height means nothing (because the parent box doesn't have a height) BUT will allow that the height defined by the svg wrapper takes the full space and works in those buggy ereaders. On the other hand, is perfectly possible to assign a valid height (not one that has no effect, as I stated in the previous paragraph) to the figure tag; read the following post about images and captions:
https://www.mobileread.com/forums/sh...4&postcount=29