Frage zum Wiki-Artikel „object-fit“

[nix]

contain: wird angepasst …

würde vlt. etwas klarer werden, wenn erwähnt würde, daß das Anpassen (zumindest bei „manchen“ Browsern?) durch das Hinzufügen von transparenten Pixeln erfolgt. Weshalb ea dann z. B. ein :hover auf diese Bereiche ebenso „hoovert“ wie beim eigentlichen Bild.

Aufgefallen ist mir das bei so einem “holy grail”, in dessen Mitte ein Grid aus Bildern (ähnlich einem der hier nebenan gezeigten Beispiele) angeordnet sind. Die img stecken dabei in einem figure, das mittels object-fit: contain befüllt wurde. Und dann hat beim Zeigen des Bildes mittels scale die Maus beim :hover „aus unerfindlichem Grund“ (s.o.) fast nicht aufhören wollen, sich wichtig zu tun … — Bei „aspect-ratio(img) / aspect-ratio(figure)“ deutlich ungleich 1 ist das nicht so toll.

Diese Nicht-Letterbox-Balken sind jedenfalls kein NIchts.

[Rolf B]

Hallo nix,

dabei ist das doch logisch. :hover gilt für das Element, nicht den Inhalt.

Also, wenn die Maus in der Box des Elements ist, gilt die :hover Pseudoklasse.

Wenn du den :hover nur für den Bildinhalt willst, tja, äh, da müsste ich erstmal etwas grübeln und basteln. Nicht im Urlaub.

Rolf

[nix]

Schon klar — aber eben überraschend. Denn: das :hover galt ja dem Bild. Daß draus dann ein „Bild + Anpassungs-Bereich“ wird irritiert spätestens dann, wenn das, was angezeigt wird (ob der transparenten Füllung) „nebendran“ immer noch hoovert.

[Gunnar Bittersmann]

@@nix

Aufgefallen ist mir das bei so einem “holy grail”, in dessen Mitte ein Grid aus Bildern (ähnlich einem der hier nebenan gezeigten Beispiele) angeordnet sind. Die img stecken dabei in einem figure, das mittels object-fit: contain befüllt wurde. Und dann hat beim Zeigen des Bildes mittels scale die Maus beim :hover „aus unerfindlichem Grund“ (s.o.) fast nicht aufhören wollen, sich wichtig zu tun … — Bei „aspect-ratio(img) / aspect-ratio(figure)“ deutlich ungleich 1 ist das nicht so toll.

Was nicht so toll ist: Da du mal wieder nicht gezeigt hast, was du gemacht hast (d.h. Online-Beispiel verlinkt), kann man dir nicht sagen, was du falsch gemacht hast.

🖖 Живіть довго і процвітайте

[nix]

Ob ein Beispiel da was bringt? Immerhin weiß ich ja schon, was da „schuld“ ist. Denke nur, daß es auch andere überraschen könnte. Aber bitte:

figure {
	z-index= 0;
	inline-size: 400px;
	block-size: 300px;
	padding: 0;
	margin: 0;
	z-index: 0;
	&:has(img:hover) {
		z-index: 1;
	}
	& > img {
		z-index: 0;
		object-fit: contain;
		aspect-ratio: 1;
		transform-origin: center;
		scale: 1;
		opacity: 1;
		&:hover  {
			z-index: 1;
			scale: 3
		}
		transition: all 2s ease-in-out;
	}
}

[Gunnar Bittersmann]

@@nix

Ob ein Beispiel da was bringt?

CSS-Code ohne zugehörigen HTML-Code und in dem Fall auch das Bild bringt wenig. Dein Problem ist nicht nachvollziehbar. Online-Beispiel, bitte.

Immerhin weiß ich ja schon, was da „schuld“ ist. Denke nur, daß es auch andere überraschen könnte.

Ich weiß es auch: du bist schuld‽ Und das ist jetzt wenig überraschend.

🖖 Живіть довго і процвітайте