Antwort an „nix“ verfassen

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? ↩︎

freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

abbrechen