img Format und Erscheinungsbild 4:3 bei 50% breite, und Hover Probleme mit Hintergrund

[Rolf B]

Hallo Andreas.,

ja ok, durch das Ändern von width und height im :hover-Fall verschiebt sich das Umfeld natürlich.

Du nagelst die Bildgröße derzeit per CSS für das img-Element fest, auf 300x225, sogar atombombensicher mit !important. Das !important hat vermutlich keinen Effekt, es wirkt lediglich anderen CSS Angaben entgegen, die anderswo stehen. Wenn es da Konflikte gibt, muss man (a) gucken, ob die "feindlichen" Regeln die richtigen Selektoren haben und sollte (b) schauen, ob man mittels Spezifität eine Lösung findet. Deswegen auch der Link auf die Specifishity, das Bild veranschaulicht das sehr schön. Weitere Infos zu Spezifität und Kaskade findest Du im Selfwiki.

Hast Du Einfluss auf das HTML? Wenn ja, könntest Du die Bilder so wie ich in ein figure-Element einrahmen (das bringt ein display:block sowie Margins und Paddings mit, dem kannst Du mit CSS entgegenwirken.

Die figure setzt Du auf display:inline-block sowie width:300px und heigth: 223px. Das Bild stellst Du da rein, mit width:100%, height:100% und object-fit:cover. Ob Du dann noch den aspect-ratio brauchst, weiß ich nicht.

In der Hover-Regel setzt Du width und height auf auto sowie transformierst. Dadurch sollte der Rest des Dokuments unverändert bleiben, weil die figure ihre Größe behält.

Wenn Du möchtest, dass die Figure sich im Zustand ohne :hover irgendwie automagisch an die Bildgröße anpasst, dann hast Du verloren, fürchte ich. Sie würde es dann auch im :hover Zustand tun. Eventuell könnte man das durch zweimaliges Einbinden des Bildes hinbekommen, einmal beschnitten, einmal skaliert und unbeschnitten mit position:absolute, um die Größe nicht zu verändern. Die Festgrößen-Lösung wäre einfacher.

Apropos Festgröße: Muss es px sein? Wenn jemand in den Browsereinstellungen die Textgröße deiner Seite skaliert, skalieren die Bilder nicht mit. Es wäre darum besser, die Bildbreite in em festzulegen (15em bis 20em sollte passen), das kannst Du nach passendem visuellen Eindruck justieren. Dann skalieren die Bilder mit dem Text.

Rolf