nix: Frage zum Wiki-Artikel „Einbindung_mit_img“

Beitrag lesen

SELF-Forum

Frage zum Wiki-Artikel „Einbindung_mit_img“

nix
– Informationen zu den Bewertungsregeln

problematische Seite

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

  1. der Inspektor geöffnet ist und man
  2. in diesem das :hover erzwingt.
  3. 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 …

  1. Warum nur habe ich jetzt auch noch das Beispiel-Basteln angefangen? ↩︎

Beitrag melden
–
Informationen zu den Bewertungsregeln