CSS Responsive Image Tutorial: So machen Sie Bilder mit CSS reaktionsschnell

Die meisten heutigen Websites reagieren. Wenn Sie Bilder auf dieser Site zentrieren und ausrichten müssen, müssen Sie lernen, wie Sie Bilder flüssig machen oder mit CSS reagieren können.

Ich habe vor ein paar Wochen ein Tutorial-Video gepostet, in dem erklärt wird, wie man eine reaktionsschnelle Website Schritt für Schritt erstellt. Im Video haben wir ein Bild reaktionsschnell gemacht. In diesem Beitrag möchte ich jedoch etwas detaillierter erläutern, wie Bilder reaktionsschnell gemacht werden können.

Sie werden auch einige der allgemeinen Probleme kennenlernen, die auftreten können, wenn Sie versuchen, Bilder reaktionsfähig zu machen - und ich werde versuchen, zu erklären, wie sie gelöst werden können.

So machen Sie Bilder mit CSS reaktionsschnell

Soll ich relative oder absolute Einheiten verwenden?

Ein Bild flüssig oder reaktionsschnell zu machen, ist eigentlich ziemlich einfach. Wenn Sie ein Bild auf Ihre Website hochladen, hat es eine Standardbreite und -höhe. Sie können beide mit CSS ändern.

Um ein Bild ansprechbar zu machen, müssen Sie seiner Eigenschaft width einen neuen Wert zuweisen. Dann passt sich die Höhe des Bildes automatisch an.

Es ist wichtig zu wissen, dass Sie für die Eigenschaft width immer relative Einheiten wie Prozentsatz verwenden sollten, anstatt absolute wie Pixel.

img { width: 500px; }

Wenn Sie beispielsweise eine feste Breite von 500 Pixel definieren, reagiert Ihr Bild nicht - da die Einheit absolut ist.

img { width: 50%; }

Deshalb sollten Sie stattdessen eine relative Einheit wie 50% zuweisen. Dieser Ansatz macht Ihre Bilder flüssig und sie können ihre Größe unabhängig von der Bildschirmgröße ändern.

Soll ich Medienabfragen verwenden?

Eine der Fragen, die mir am häufigsten gestellt werden, ist, ob Sie Medienabfragen verwenden sollten oder nicht.

Eine Medienabfrage ist ein weiteres wichtiges Merkmal von CSS, mit dessen Hilfe eine Website reaktionsfähig wird. Ich werde hier nicht weiter auf Details eingehen, aber Sie können meinen anderen Beitrag später lesen, um zu erfahren, wie Sie Medienabfragen detaillierter verwenden.

Die Antwort auf diese Frage lautet: "Es kommt darauf an". Wenn Ihr Bild von Gerät zu Gerät unterschiedliche Größen haben soll, müssen Sie Medienabfragen verwenden. Sonst wirst du nicht.

In diesem Beispiel hat Ihr Bild eine Breite von 50% für jede Art von Bildschirm. Wenn Sie es jedoch für mobile Geräte in voller Größe erstellen möchten, müssen Sie Hilfe bei Medienabfragen erhalten:

@media only screen and (max-width: 480px) { img { width: 100%; } }

Basierend auf der Medienabfrageregel nimmt jedes Gerät, das kleiner als 480 Pixel ist, die volle Größe der Bildschirmbreite ein.

Sie können sich auch die folgende Videoversion dieses Beitrags ansehen:

Warum ist die Eigenschaft max-width nicht großartig?

Eine andere Möglichkeit für Entwickler, reaktionsschnelle Bilder zu erstellen, ist die Eigenschaft max-width. Dies ist jedoch nicht immer die beste Methode, da sie möglicherweise nicht für jede Art von Bildschirmgröße oder Gerät geeignet ist.

Bevor wir mit einem Beispiel fortfahren, müssen Sie zunächst verstehen, was genau die Eigenschaft max-width bewirkt.

Die Eigenschaft max-width legt eine maximale Breite für ein Element fest, wodurch die Breite dieses Elements nicht größer als sein Wert für die maximale Breite sein kann (sie kann jedoch kleiner sein).

Wenn das Bild beispielsweise eine Standardbreite von 500 Pixel hat und Ihre Bildschirmgröße nur 360 Pixel hat, können Sie das gesamte Bild nicht sehen, da nicht genügend Speicherplatz vorhanden ist:

img { max-width: 100%; width: 500px; // assume this is the default size }

Daher können Sie eine Eigenschaft für die maximale Breite für das Bild definieren und auf 100% festlegen, wodurch das Bild von 500 Pixel auf 360 Pixel verkleinert wird. So können Sie das gesamte Bild auf einem kleineren Bildschirm sehen.

Das Gute ist, dass das Bild in jedem Gerät mit einer Größe von weniger als 500 Pixel flüssig ist, da Sie eine relative Einheit verwenden.

Leider wird die Bildschirmgröße etwas größer als 500 Pixel, das Bild jedoch nicht, da die Standardbreite 500 Pixel beträgt. Dieser Ansatz beeinträchtigt die Reaktionsfähigkeit des Bildes.

Um dies zu beheben, müssen Sie die Eigenschaft width erneut verwenden, wodurch die Eigenschaft max-width unbrauchbar wird.

Was ist mit Höhen?

Ein weiteres häufiges Problem, auf das Sie möglicherweise stoßen, hängt mit der Eigenschaft height zusammen. Normalerweise ändert sich die Größe eines Bildes automatisch selbst, sodass Sie Ihren Bildern keine Höheneigenschaft zuweisen müssen (da dies das Bild irgendwie beschädigt).

In einigen Fällen müssen Sie jedoch möglicherweise mit Bildern arbeiten, die eine feste Höhe haben müssen. Wenn Sie dem Bild eine feste Höhe zuweisen, reagiert es zwar immer noch, sieht aber nicht gut aus.

img { width: 100%; height: 300px; }

Glücklicherweise gibt es eine weitere Eigenschaft, die CSS anbietet, um dieses Problem zu beheben…

Lösung: Die Objektanpassungseigenschaft

Um mehr Kontrolle über Ihre Bilder zu haben, bietet CSS eine weitere Eigenschaft namens Objektanpassung. Verwenden Sie die Eigenschaft object-fit und weisen Sie einen Wert zu, damit Ihr Bild besser aussieht:

img { width: 100%; height: 300px; object-fit: cover; object-position: bottom; }

Bei Bedarf können Sie auch die Eigenschaft Objektposition (zusätzlich zur Objektanpassung) verwenden, um sich auf einen bestimmten Teil des Bildes zu konzentrieren. Viele Menschen kennen die Objektanpassungseigenschaft nicht, aber es kann hilfreich sein, diese Art von Problemen zu beheben.

Ich hoffe, dieser Beitrag hat Ihnen geholfen, Ihre Probleme mit reaktionsschnellen Bildern zu verstehen und zu lösen. Wenn Sie mehr über Webentwicklung erfahren möchten, besuchen Sie meinen Youtube-Kanal.

Danke fürs Lesen!