Epub - css - img Hogyan?

Segítségeteket kérném...

Különböző méretű képeket szeretnék úgy elhelyezni (univerzálisan) egy ebook-ban (epub), hogy más-más kijelző méretű/felbontású eszközökön is teljesüljenek az alábbiak...

  1. a képek eredeti oldal-aránya ne változzon
  2. vízszintesen a kijelző közepén jelenjen meg a kép
  3. max-szélesség az oldal szélessége
  4. max-magasság a kijelző magasságának 90%-a (alul a képhez tartozó szövegnek kellene fennmaradó hely)
  5. fentieknek megfelelően automatikus méretezés (más-más méretű kijelzőkön, vagy ellenőrzésként a Calibre Viewer-ben, ha módosítom az ablak méretét)

Eddig erre jutottam a stílusfájlban:

img {
display: block;
text-align: center;
text-indent: 0;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 2em;
max-width: 100%;
max-height: 80%;
height: auto;
width: auto;
}

Nem tökéletes ez sem, és a 4. pontban leírt elvárás sehogy sem akar működni. Szerintem valamit félreértek!

Hozzászólások

a 4. pontban leírt elvárás sehogy sem akar működni.

Epubos CSS-nél is érvényes a dobozmodell? Ha igen, akkor talán az kavarhat be a százalékos mérettel, ami (ha nem tévedek) az img által már örökölt méretből képződik. (De hüje vagyok, üsetek láma vagyok, javítsatok ki.)

vw, vh a szulore, az img-re meg object-fit: contain;

 

Valahogy igy:

<div style="margin-left:1vw; margin-right: 1vw">
 <img style="height: 80vh; max-height: 800px; object-fit:contain;" src="" />
</div>

Saying a programming language is good because it works on all platforms is like saying anal sex is good because it works on all genders....