Seitenverhältnis von Bild beibehalten

Mr. Brooks

Grünschnabel
Hallo,

ich erstelle mir gerade eBooks im ePub-Format, das ähnlich wie HTML formatiert wird. Ein wenig Erfahrungen mit HTML und CSS habe ich, für ePubs reicht es aus. Wenn Bilder eingefügt werden (ich teste derzeit Omnipage um gescannter Bücher zu konvertieren) , werden die häufig stark in die Breite gezogen wenn man das eBook auf voller Seitenbreite öffnet. Wie kann ich einstellen, dass das Seitenverhältnis beim skalieren immer gleich bleibt?

Ich dachte erst es geht so https://wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/Grafiken#responsives_Design_.28RWD.29, Ergebnis war aber wieder das gleiche wie vorher.
 
Mit HTML und CSS ist es einfach, aber ich weiß nicht, ob es auf das ePub-Format übertragbar ist. Man stellt das Bild in einen Container und weist ihm max-width zu. Dann passt sich das Bild an den Container an und das Seitenverhältnis bleibt erhalten. Außerdem wird das Bild nicht vergrößert, weil das zu Qualitätsverlust führen würde.
https://jsfiddle.net/683wxhzd/
 
Das funktioniert so leider nicht. Ein div-Element ist schon gesetzt um das Bild zu zentrieren. Wenn ich da mx-width einfüge mit 100% (oder weniger) wird dennoch das Seitenverhältnis verschoben, da das eBook ja sonst aus Text besteht und der Text einfach so breit dargestellt wird wie das Display breit ist. Entsprechend sind das dann die 100% und das Verhalten ist genau wie vorher. Man müsste irgendwie einstellen können, dass das Seitenverhältnis des Bildes immer erhalten bleibt.
 
Zurück