So legen Sie die Breite und Höhe des Bildes in CSS fest

Bilder spielen im Webdesign eine wichtige Rolle. Durch die richtige Einstellung der Breite und Höhe von Bildern kann die Webseite schöner und sinnvoller gestaltet werden. Wie legt man also die Breite und Höhe des Bildes über CSS fest?

Zunächst müssen Sie beim Einfügen von Bildern in HTML-Code auf folgende Punkte achten:

1. Alt-Attribut verwenden: Das Alt-Attribut wird verwendet um Textbeschreibungen zu den eingefügten Bildern hinzuzufügen. Wenn das Bild nicht geladen werden kann, kann das Alt-Attribut den Benutzern auch helfen, den Inhalt des Bildes zu verstehen.
2. Geben Sie die Breite und Höhe des Bildes an: Beim Festlegen der Breite und Höhe des Bildes können Sie die Breiten- und Höhenattribute des HTML-Tags verwenden. Allerdings ist diese Methode unflexibel und kann kein responsives Design für Geräte unterschiedlicher Größe erreichen.

Daher ist es eine bessere Wahl, die CSS-Eigenschaft „Hintergrundbild“ und „Hintergrundgröße“ zu verwenden, um die Breite und Höhe des Bildes festzulegen. Hier sind einige praktische CSS-Tipps:

① Feste Breite und Höhe festlegen

Verwenden Sie die Breiten- und Höhenattribute in CSS, um die feste Breite und Höhe des Bildes festzulegen, wie gezeigt unten: # 🎜🎜#

.img{
  width: 300px; /*设置图片宽*/
  height: 200px; /*设置图片高*/
}

Natürlich kann es auch per Abkürzung eingestellt werden:

.img{
  width: 300px; height: 200px; /*用“；”隔开即可*/
}

② Adaptive Breite und Höhe entsprechend dem Container

Manchmal, Wir müssen die Bild-Randomisierung implementieren. Passt Breite und Höhe an Änderungen in der Containergröße an. Zu diesem Zeitpunkt können Sie das Attribut „background-size“ in CSS verwenden und seinen Wert auf „contain“ oder „cover“ festlegen.

„enthalten“ bedeutet, dass das Bild vollständig angezeigt wird, aber möglicherweise nicht breit oder hoch genug ist;

„Abdecken“ bedeutet, dass das Bild den Container ausfüllt, aber wir Es kann nicht garantiert werden, dass das Bild vollständig angezeigt wird.

lautet wie folgt:

.img{
  background-image: url(./img/bg.jpg); /*设置背景图片地址*/
  background-size: contain; /*或者：background-size: cover;*/
}

③ Skalieren Sie das Bild proportional

Um sicherzustellen, dass die Proportionen des Bildes unverändert bleiben, können wir festlegen ein Wert als prozentuales „padding-top“-Attribut. Die Höhe des Bildes wird anhand der Breite des übergeordneten Containers bestimmt und so eine proportionale Skalierung erreicht.

.img{
  background-image: url(./img/bg.jpg); /*设置背景图片地址*/
  padding-top: 50%; /*比例数值等于图片的高/宽*100% */
  background-size: cover; /*铺满背景容器*/
}

Die oben genannten sind drei gängige Methoden zum Festlegen der Breite und Höhe von CSS-Bildern. Durch den flexiblen Einsatz können wir die Bilddarstellung im Webdesign einfach optimieren und das Benutzererlebnis verbessern.

Das obige ist der detaillierte Inhalt vonSo legen Sie die Breite und Höhe des Bildes in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!