[momoha]

Aaah you are right! I didn’t test the code with the caption.

Actually I came out with this new code especially for ePub 3, because my previous codes were getting messed up in ADE with the switch from ePub 2 to ePub 3. I should have specified it in my post... Oops

Here’s the explanation I found:
I found out a problem in ADE with the code for portrait image styling when using ePub3 instead of ePub2. From what I understood, softwares either use vh or %. ADE with ePub2 uses % but vh with ePub3, but it doesn’t support @supports....! So this results in images not being displayed correctly in ADE when using ePub3. The solution is to use vh straight away, without apply it through @supports, but then it won’t be displayed correctly in the softwares not supporting vh.


This is the code I was previously using for images with captions:

<div style="page-break-inside: avoid;"><p class="portrait-70"><img class="portrait" alt="" src="../Images/portrait.jpg"/></p>

<p class="caption">Insert caption here</p></div>

img.portrait {
	height: 100%;
}

p.portrait-70 {
	padding: 0;
	margin: 0;
	text-align: center;
	height: 70%;
}

@supports (height: 100vh) {
  img.portrait {
    height: 100vh;
  }
  p.portrait-70 {
    height: 70vh;
  }
}

This is the code I was using for full page images (that always annoyed me as I often have to process hundreds of these images, so I’m very happy with the new one if it works fine in ePub 3!!)

<div class="portrait">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1400 2370" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="2370" width="1400" xlink:href="../Images/C1.jpg"/></svg>
  </div>