Hi noRiddle,
ich versuche es mal anhand vom CSS zu erklären.
Wir haben diese Angaben:
.lb_image {
display: block;
vertical-align: middle;
text-align: center;
position: relative;
overflow: hidden;
margin: 0 0 10px 0;
}
Das ist der äussere Image-Container.
Ich denke das ist soweit klar.
Der ist 100% breit und hat ein overflow hidden damit nichts übersteht.
Die Höhe ist flexibel. Das "relative" wird für das Bild gebraucht um es dann richtig zu positionieren.
Dann haben wir diese before-Anweisung:
.lb_image:before {
content: "";
display: block;
padding-top: 78%;
}
Die bewirkt, dass lb_image immer eine Höhe von 78% im Verhöltnis zur Breite bekommt.
Als Beispiel ... bei einer Breite von 200px wird der Container immer 156px hoch sein.
Jetzt kommt das eigentliche Bild:
.lb_image img {
margin: auto;
position: absolute;
font-size: 0px;
top: 0;
left: 0;
bottom: 0;
right: 0;
max-width: 20%;
max-height: 20%;
-webkit-transform: scale(5.0);
-moz-transform: scale(5.0);
-ms-transform: scale(5.0);
-o-transform: scale(5.0);
transform: scale(5.0);
}
Wichtig ... es wird absolut innerhalb von lb_image positioniert.
Höhe und Breite von lb_image sind ja bereits berechnet.
Die 0 Werte von top, left, bottom und right sorgen in Verbindung mit dem margin: auto dafür dass das Bildelement zentriert wird. Das funktioniert aber nur richtig wenn das Bild auch kleiner ist wie der eigentliche Container.
Jetzt kommt ein kleiner "Kniff".
Mit width: 100% und height: 100% kann ich hier nicht arbeiten da ich sonst ein verzerrtes Bild bekomme.
Wenn ich nur width:100% und height: auto mache kann es sein, dass "Hochkant" Bilder abgeschnitten werden.
(objet-fit wäre auch eine Lösung wenn da nicht der IE11 wäre)
Mit max-width bzw. max-height von 20% werden für das Bild erstmal kleinere Werte für Höhe und Breite berechnet welche dann mit transform 5 wieder vergößert werden. Der Vorteil dabei ist dass dadurch auch Hochkantbilder sauber zentriert und nicht abgeschnitten werden. Wenn ich nur die beiden max-width und max-height Angaben mit 100% nutzen würde, wäre genau das der Fall.
So klarer was hier passiert?
Markus