Issue with adding images in epub

[klgc]

Sometime ago I discovered that the way Sigil added illustrations (images) in a chapter they didn’t resize, at least in iBooks, so after a bit of trial and error I’m now using the following sample code:
[and yes, I’ve read the old thread]
———————————
<p>Even Elleen paused from eavesdropping on the telephone party line to laugh and say, “You men are so dumb.”</p>

<div style="text-align: center; padding: 0pt; margin: 0pt; line-height: 100%;">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="66.67%" viewBox="0 0 600 400" preserveAspectRatio="xMidYMid meet">
<image width="600" height="400" xlink:href="../Images/C02Ilus05.png"/>
</svg>
</div>

<p>In a brown study, Calan was down with the dog by the cooling stove, back to thinking about how he might sidetrack their will to start …
———————————

It’s not a satisfactory solution though, because now where the illustrations display and resize as intended in iBooks (MacOS and IOS), and resize properly in the likes of ADE and Calibre viewer, they don’t display properly in the latter. By not displaying properly in the latter, I mean that there is excess white space before and after each illustration. [See screenshots below]

What the heck am I missing?

Thank you

iBooks screenshot



ADE screenshot

[GeoffR]

Originally Posted by klgc

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="66.67%" viewBox="0 0 600 400" preserveAspectRatio="xMidYMid meet">
<image width="600" height="400" xlink:href="../Images/C02Ilus05.png"/>
</svg>

The problem is that height="66.67%" means 66.67% of the height of the containing block, which is unbounded, and so in effect 66.67% of the page height, but the image is not tall enough to fill that space.

I think the solution is to remove the width="100%" and height="66.67%" from the <svg> and add this to your CSS stylesheet instead:

svg { width:100%; max-width:100%; height:auto; max-height:100%; }

Edit: or add it to the <svg> as an inline style instead:

style="width:100%; max-width:100%; height:auto; max-height:100%;"

Edit2: The important point is that auto doesn't work in SVG without a bound, so if you use height:auto you must set max-height as well.

[klgc]

Thank you, that seems to have cleared up this issue :-)