nicht angemeldet
Frage zum Wiki-Artikel „Einbindung_mit_img“
Eigentlich wollte ich „was ganz einfaches“ fragen. Und habe ein wenig Beispielbasteln angefangen. Jetzt weiß ich meine Frage nicht mehr so recht — und befürchte, Ihr habt nach dem da unten dafür meine Fragezeichen abbekommen.[1]
Anstelle des Einsatz eines Container-Elements ist dies mit object-fit und object-position viel einfacher
Allerdings irritiert dann ggf. das, was der Browser dabei als Bild ansieht. Denn wenn object-fit: contain für „leere Bereiche“ im umgebenden Container sorgt, meint dieser, daß diese für ein img:hover sehr wohl vorhanden sein können (oder sogar immer sind?) — allerdings nicht durchgehend. Bislang, hier, erst mal „nur“ bei „normalen“ JPGs und, wie sollte es anders sein, nicht da, beim „Sparpixel-Betrieb“:
<html>
<head>
<style>
img {
scale: 10;
object-fit: contain;
transition: background-color 1s linear;
}
div {
outline: 2px solid lime;
width: 150px; height: 80px;
display: grid;
place-content: center;
background-color: green; /* Ich wollte doch nur, daß … */
&:has(img:hover) {
background-color: yellow; /* … man auch was sehen kann! */
}
}
</style>
</head>
<body>
<div><img src="data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs"></div>
</body>
</html>
Das witzige(???) daran: funktioniert. In Safari. Und in Firefox. Aber beim letztgenanntem nur „eigenwillig“, also wenn
- der Inspektor geöffnet ist und man
- in diesem das :hover erzwingt.
- Dannach ist da auch wieder Feierabend. Wobei: wenn man im Inspektor dann noch mit :focus-visible spielt, passen wenigstens die Status-Wechsel (hier: Farben) vom :hover wieder. Und :target dient als Ausschalter.
(Ich sehe zwar keinen entsprechenden Zusammenhang – aber könnte das an irgend einer Erweiterung und nicht am FF selber liegen?)
Und: Firefoxens Cluseau meint, das Pixel wäre 10x10 (immerhin!). Safaris Cato dagegen behauptet 0.991848×0.991848 …
Zurük zum Anfang, „vor“ diesem plötzlich entstandenen Nebenkriegs-Schauplatz: ob mit oder ohne gelb/grünem Hintergrund, wo hier so eingefärbt wird (oder werden sollte), hoovert es „mit eingebautem object-fit: cover jedenfalls.
Nun gut, da mir die Frage abhanden gekommen ist: man kann nicht nur zentrieren wollen, oder? Bilder sind doch (oft) zum anklicken da …
Warum nur habe ich jetzt auch noch das Beispiel-Basteln angefangen? ↩︎
-
Hallo nix,
Eigentlich wollte ich „was ganz einfaches“ fragen. Und habe ein wenig Beispielbasteln angefangen. Jetzt weiß ich meine Frage nicht mehr so recht —
...
Nun gut, da mir die Frage abhanden gekommen ist: man kann nicht nur zentrieren wollen, oder? Bilder sind doch (oft) zum anklicken da …
Zum Klicken würde ich ein a-Element (für eine neue URL - etwa das Bild in größerer Auflösung) oder einen button - für eine Interaktion nehmen.
Bis bald! Jonathan
--
"Ich habe heute ein Elan-Problem und mein Tatenvolumen ist fast aufgebraucht!"