[jugaor]

Hello.

For a while now I've been using the "Single file solution for full-screen images with captions" method from here:
https://github.com/jstallent/ImagesSingleFile
which basically is to use two types of measures for images (percentage and viewport).

.image1 img {
   height: 85%;
}
.image1 img:only-of-type {
   height: 85vh;
}

Devices/apps with only CSS2 support will use the first and those with CSS3 will use the second, so they will always display the image with the correct height.

However, placed like this, the Calibre conversion to azw3 takes the last measure (viewport), which Kindle doesn't recognize.
If we invert them, everything is fine (it takes the last one, percentage this time):

.image1 img:only-of-type {
   height: 85vh;
}
.image1 img {
   height: 85%;
}

That is: Calibre seems to not respect the higher specificity of the pseudo-class, only the order of classes within the css (or I'm doing something wrong…?).

So far, the latter way has worked fine for me, both in epubs and converted azw3s (and thus avoids adding an extra @media amzn-kf8).
I would like to know if this behavior is as expected or if it could change in the future…

An idea: if both measurements are found and the conversion is for Kindle, could Calibre automatically discard viewport and use percentage?

Thanks in advance (and sorry for my terrible English).



[Calibre 6.29.0, Windows 11-64bits, default conversion options (I think).
I'm attaching the test epub, the converted azw3 and the log.]