Frage zum Wiki-Artikel „object-fit“
nix
- css
- frage zum wiki
0 Rolf B0 nix
0 Gunnar Bittersmann
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.
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
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.
@@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 einemfigure
, das mittelsobject-fit: contain
befüllt wurde. Und dann hat beim Zeigen des Bildes mittelsscale
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.
🖖 Живіть довго і процвітайте
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;
}
}
@@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.
🖖 Живіть довго і процвітайте