css bild größe an seite anpassen

[marctrix]

Hej hmm,

ich habe folgendes css

.ueber_uns {
	width: 1178.8px;
	height: 625.8px;
	background: url('../../images/skillsNeu.png');
	background-size: contain;
	background-repeat: no-repeat;
 }

problem: die größe des bildes ist fest und passt sich nicht der fenstergröße an.

Wie schon gesagt: Bezug ist nicht das Fenster (du meinst wohl viewport, was später noch wichtig wird), sondern die Größe des Elementes mit der Klasse ueber_uns.

Der Name dieser Klasse lässt mich übrigens befürchten, dass du kein Hintergrundbild verwenden solltest, sondern ein img-Element.

Wenn du möchtest, dass sich das Element an die Größe des viewports anpasst, solltest du statt Pixel eine andere Einheit verwenden. vh, vw, vmin und vmax bieten sich hierfür an.

Möchtest du (was meist sinnvoller ist), dass das Bild von der Breite des Elternelementes abhängt, nutzt du als Einheit Prozent.

Wenn du tatsächlich ein echtes Bild statt eines Hintergrundes verwendest, gibst du diesem eine Breite oder Höhe von 100% (je nachdem welchen Effekt du erreichen möchtest — u.U. kombiniert mit max-height oder max-width).

Dann kannst du die Größe des Bildes über den ungebenden Container kontrollieren. Ggfs. sollte das ein figure mit fogcaption sein, was screenreader wiederum zur Berechnung des accessible name verwenden können.

Eventuell macht es auch Sinn, verschiedene Auflösungen des Bildes mittels picture bereit zu stellen.

die width und height daten sind 140% der original bildgröße.

Ist die bewusst gewählt oder ein Zufall?

Rechne doch das Bild auf die gewünschte Größe hoch. Das ist zwar nicht so hübsch, weil Raufrechnen aufwändig und nicht perfekt ist, aber eine gute Bildbearbeitung macht das besser als der Browser.

wie mach ich das responsive?

Siehe oben. Weiterführende Artikel zu responsiven Bildern gibt es tatsächlich wie Sand am mehr. 😉

Marc