css bild größe an seite anpassen

[hmm]

hi leute,

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. die width und height daten sind 140% der original bildgröße.

wie mach ich das responsive?

[Gunnar Bittersmann]

@@hmm

.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.

Die Größe des Bildes ist nicht fest – sie passt sich der Elementgröße an.

Die Größe des Elements ist fest – das sollte bei width: 1178.8px; height: 625.8px auch nicht verwundern. (BTW, ⅕ Pixel?)

wie mach ich das responsive?

Indem du auf Angaben in px verzichtest. Indem du vergisst, dass es sowas wie px überhaupt gibt.

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

Das hört sich nicht gut an. Wahrscheinlich sieht das auch nicht gut aus.

LLAP 🖖

[hmm]

ohne width: 1178.8px; height: 625.8px; seh ich kein bild!

was mach ich jetzt? außerdem ist mir das originalbild zu klein

[Gunnar Bittersmann]

@@hmm

ohne width: 1178.8px; height: 625.8px; seh ich kein bild!

was mach ich jetzt?

• das Element mit Inhalt füllen
• dem Element eine Breite/Mindesthöhe geben – und zwar nicht in px

außerdem ist mir das originalbild zu klein

• mach’s größer
• nimm ein anderes

LLAP 🖖

[Matthias Apsel]

Hallo hmm,

ohne width: 1178.8px; height: 625.8px; seh ich kein bild!

Ohne Link auf die Seite sehen wir noch viel weniger als kein Bild. Du bist doch nun schon lange genug dabei.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

ohne width: 1178.8px; height: 625.8px; seh ich kein bild!

Ohne Link auf die Seite sehen wir noch viel weniger als kein Bild.

Man könnte glatt sagen, wir wären nicht im Bilde.

LLAP 🖖

[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

[Matthias Apsel]

Hallo marctrix,

Ggfs. sollte das ein figure mit fogcaption sein,

Nicht so nebulös, bitte.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@marctrix

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

Das lässt sich so nicht rauslesen.

Generell: Wenn das Bild zum Inhalt gehört, dann gehört es ins HTML. Wenn das Bild Verzierung ist, dann gehört es ins CSS.

Ein Test dafür ist die Frage: Wenn jemand die Seite ausdruckt, muss das Bild mit aufs Papier?

vh, vw, v-min und v-max bieten sich hierfür an.

v-min und v-max bieten sich hierfür eher weniger an; vmin und vmax schon eher. Ich hab das mal in deinem Posting korrigiert.

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

Eventuell eher ohne picture, sondern mittels srcset-Attribut.

LLAP 🖖