CSS height:auto Problem

Hallo zusammen,

ich frage mal wieder nach was nach. Hänge da irgendwie fest und drehe mich im Kreis.

Folgendes:

<img class="f_rechts b-lazy" src="data:image/gif;base_64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://beispiel.rocks/beispiel.rocks/domin /bilder/kunden/6557/hauptbilder/klein/6557.jpg" width="100" height="75" alt="Ansicht Ferienwohnung 6557" />

Da wird also erst mal ein Platzhalterbild eingebunden (1x1px) und dann per Lazy-Load das eigentlich Bild von data-src nach src verschoben, wenn es im Sichtbereich ist. Das funktioniert auch soweit sehr gut.

Nur habe ich nun ein Problem mit den Größenangaben direkt beim IMG in Verbindung mit dem Platzhalter und meinem CSS.

Das

width="100" height="75"

wird benötigt, ist aber nicht immer gleich. Die Größen sind abhängig vom Bild und können sich leicht variieren, je nachdem ob quer oder hochkannt, 4:3 oder 16:9 oder sonst was.

So, im CSS habe ich fürs responsitive Layout

img {
  max-width: 100%;
  height: auto;
}

Das brauche ich auch, damit sich die Bilder dynamisch an den Platz anpassen und zwar auch in der Höhe.

Und genau dieses "height: auto;" ist mein Problem. Auto ist zwar der Defaultwert von height, aber sobald das da ist wird die Höhenangabe height="75" im IMG-Tag ignoriert. Das führt nun dazu, dass das Platzhalterbild von 1x1px hochskaliert wird auf 100x100px, was natürlich höher ist als es soll und somit das Layout verschiebt. Sobald dann das echte Bild nachgeladen ist passt wieder alles, denn dort stimmt die Größe dann.

Umgehen kann ich das nur, wenn ich das "height: auto;" im CSS weg lasse, aber dann funktioniert die automatische Höhenanpassung bei Bildverkleinerung nicht mehr.

So, was nun tun? Einen einmal gesetzten height-Wert im CSS kann man ja nicht wieder entfernen. "None" oder so gibt es ja nicht und "auto" ist bereits der Standard.

Danke Dir erstmal

Hm, habe ich da nun einen Knoten im Kopf oder kommt das aufs Gleiche raus???

So wie es jetzt ist, also mit dem "height: auto;" wird das 1x1px ja auf 100x100 hochskaliert. Das gibt ja die Probleme, dass es dann, wenn es ersetzt wird, nur noch die echten 100x75px hat.

Wenn ich das nun mit "height:1px, width:1px" im IMG-Tag mache, dann kommen doch zwei neue Probleme, oder?

1. das height="" im IMG-Tag wird ja durch das height:auto; gar nicht beachtet. ich müsste das height:auto hier also auch entfernen. Sobald das height:auto; da ist, kann ich im height="" angeben was ich will, die Höhe wird immer in Abhängigkeit des Formatfaktor berechnet und der Faktor ist eben unterschiedlich. Einmal 4:3, einmal 16:9 etc. und der Platzhalter eben 1:1.

Da gab es ja mal eine Bug-Meldung, aber anscheinend ist das so gewollt:
"img {height:auto} is overriding height attribute in <img /> · Issue #1899"

2. Zusätzlich würde das aber doch auch ergeben, dass die Layoutverschiebung dennoch besteht, oder? Wenn da vorher ein Bild mit 1x1px ist, dann floated der Rest ja ganz anders, und verschiebt sich wieder, wenn das echte 100x75px - Bild kommt. Wäre dann sogar noch schlimmer, weil die Breite auch nicht stimmt, so "verschieben" sich nur ein paar Zeilen, die dann unter das Bild rutschen.

Sage ja, Knoten im Kopf. Vielleicht habe ich Deine Antwort aber auch falsch verstanden.

Am einfachsten wäre was wie eine negierte CSS-Klasse, also im Sinne von img {} überall anwenden, aber nicht, wenn img die class="lazy" hat.

Hm, sehe da was. Gibt es ja: *** Link veraltet ***

Echt, Brett vorm Kopf. Da macht man Tage rum, sucht und tut, postet dann und dann fällt einem was ein, was man sich wünscht und stellt fest, dass es das schon gibt.....

:not() funktioniert ! Dann zuckt es halt im IE < 9, aber das ist mir wirklich egal.

Aus

img {
  max-width: 100%;
  height: auto;
}

wurde einfach

img:not(.b-lazy) {
  max-width: 100%;
  height: auto;
}
img.b-loaded {
  max-width: 100%;
  height: auto;
}

Muss nur noch rausfinden, ob der IE 8 nun die ganze Anweisung ignoriert oder nur das ":not(.b-lazy)"

Hm, oder sogar nochmal anders...

img {
  max-width: 100%;
}
img:not(.b-lazy) {
  height: auto;
}
img.b-loaded {
  height: auto;
}

Huch, habe mir das eben selbst noch mal angesehen und eigentlich ja.

"max-width" greift immer. height:auto fehlt, wenn der Platzhalter da ist und kommt erst, wenn das Bild ersetzt wurde. Ohne JS kommt es dann also nie, aber das ist auch egal, denn ohne JS fehlen die Bilder ja auch alle. Dann ist mir das egal, ob die Platzhalter sich anpassen oder nicht.

Jetzt wäre nur noch die Frage, ob der IE8 das height:auto auch für die normalen Bilder setzt oder die Regel ganz ignoriert. Gut, wenn ganz, dann ist das auch nicht so schlimm. Dann gibt es halt keine Größenanpassung in der Höhe, aber wer so einen alten Browser hat, der ist selbst schuld. Wobei, per IE<9-Hack müsste das ja auch gehen. Dann ruckelt es bei dem zwar, aber nur bei den Lazy-Bildern.

img {
    height: auto\9;
}

Auch grad mal geschaut, der Edge kann :not() auch