Ein responsives Bild ist ein Bild, das sich unabhängig von der Bildschirmgröße an verschiedene Geräte anpassen kann. Ein responsives Bild auf der Website ist heutzutage so wichtig. Denn es beschleunigt nicht nur die Website, sondern bietet auch ein cooles Benutzererlebnis auf allen Geräten. Die Größe responsiver Bilder wird auch durch die Größenänderung des Browsers geändert.
Responsive Bilder passen sich effizient an unterschiedliche Bildschirmgrößen auf verschiedenen Geräten an. Es stellt sicher, dass die Qualität erhalten bleibt. Eine responsive Website mit responsiven Bildern erhöht sicherlich das Engagement und die Konversionsraten. Bilder können mithilfe von CSS zusammen mit Medienabfragen responsiv gemacht werden.
In diesem Artikel werden HTML und CSS verwendet, um die Bilder responsiv zu gestalten.
Wie mache ich Bilder mit HTML und CSS responsiv?
Um Bilder mithilfe von HTML und CSS responsiv zu gestalten, führen Sie die folgenden Schritte aus:
- Verwenden Sie die Eigenschaft „max-width“.
- Verwenden Sie die Eigenschaft „width“.
- Wenden Sie Medienabfragen an.
Methode 1: Verwenden Sie die Eigenschaft „max-width“.
Die erste Methode, ein Bild responsiv zu machen, ist die Verwendung von „ maximale Breite ' Eigentum. Der ' maximale Breite Die Eigenschaft „wird verwendet, um die maximale Breite des Bildes zu definieren. Falls der Inhalt die maximale Breite überschreitet, ändert sich die Höhe des Elements.
Erstellen Sie HTML
Um eine Bilddatei im HTML-Tag
hinzuzufügen, müssen Benutzer das TagCSS hinzufügen
Erstellen Sie nun eine externe CSS-Datei und speichern Sie sie mit der Datei „. CSS ”-Dateierweiterung und verknüpfen Sie sie innerhalb des
-Tags der HTML-Datei. Um die Bilddatei in der CSS-Datei zu formatieren, beginnen Sie mit dem img-Tag und öffnen Sie die geschweiften Klammern. Fügen Sie dann innerhalb der geschweiften Klammer das „ maximale Breite: 100 % ;“ um das Bild horizontal in den Container einzupassen. Darüber hinaus wird verhindert, dass Bilder beschnitten werden. Danach fügen Sie „ Höhe: automatisch ;“ um die Höhe automatisch anzupassen, damit das Bild korrekt angezeigt wird:Bild {
maximale Breite : 100% ;
Höhe : Auto ;
}
Ändern Sie die Größe des Browserfensters, um zu überprüfen, wie das Bild skaliert wird.
Methode 2: Verwenden Sie die Eigenschaft „width“.
Eine andere Methode, ein Bild responsiv zu machen, ist die Verwendung der Eigenschaft „ Breite “. Die Eigenschaft ' Breite „definiert die Breite für die Bilder und den Text. Es enthält keine Ränder, Polsterungen oder Rahmen. Es kann die Größe von Bildern und Text im Format cm, px oder % festlegen. Um ein Bild responsiv zu machen, weisen Sie einfach das „ Breite „Eigenschaft zu“ 100 %“. Einstellung ' Breite: 100 % ;“ bedeutet, dass das Bild so groß wie das übergeordnete Element wird:
Bild {Breite : 100% ;
Höhe : Auto ; }
Das Obige bestätigt, dass das Bild reagiert. Um zu überprüfen, ob es reagiert oder nicht, ändern Sie einfach die Größe des Browserfensters.
Methode 3: Medienabfragen anwenden
Mithilfe von CSS-Medienabfragen können Benutzer das Erscheinungsbild einer Webseite ändern. Die CSS-Medienabfrage enthält Bedingungen. Wenn diese Bedingungen erfüllt sind, ändert sich das Erscheinungsbild des Geräts oder Browsers. Medienabfragen können den Benutzern auch dabei helfen, Bilder responsiv zu gestalten. Geben Sie daher zunächst das „@“ an. Medien ”-Tag und geben Sie dann das „ maximale Breite ”-Eigenschaft und weisen Sie die maximale Breite für ein Bild innerhalb der geschweiften Klammern zu. Immer wenn diese Bedingung erfüllt ist, reagiert das Bild. Fügen Sie anschließend die geschweiften Klammern hinzu, geben Sie das img-Tag an und geben Sie „ Breite: 100 % ;“ Wert:
@Medien ( maximale Breite : 480px ) {Bild {
Breite : 100% ;
}
}
Notiz : Das Bild reagiert nur, wenn es die angegebene Bedingung erfüllt.
Die CSS-Medienabfrage wurde angewendet und das Bild verhält sich nun wie responsive, wenn die Größe auf die angegebene Bildgröße geändert wird. Andernfalls reagiert es nicht:
Abschluss
Um Bilder mit HTML und CSS responsiv zu gestalten, stehen Benutzern verschiedene Methoden zur Verfügung. Zu diesen Methoden gehört es, Bilder mithilfe von „responsiv“ zu machen. maximale Breite ' Eigentum, ' Breite ”-Eigenschaft und auch durch Anwenden der CSS-Medienabfrage. In diesem Artikel wurde den Benutzern die Komplettlösung vorgestellt, um Bilder responsiv zu gestalten.