Wie kann ich mit HTML und CSS die Größe von Bildern ändern und sie zuschneiden und dabei das Seitenverhältnis beibehalten?

Anzeigen eines in der Größe geänderten und zugeschnittenen Bildes mit CSS

Einführung

Anzeigen von Bildern innerhalb bestimmter Abmessungen Dabei kann es schwierig sein, das Seitenverhältnis beizubehalten. In diesem Artikel wird erläutert, wie Sie mithilfe einer Kombination aus HTML- und CSS-Techniken die Größe eines Bilds effektiv ändern und zuschneiden können.

Größenänderung von Hintergrundbildern

Mit der Eigenschaft „Hintergrundbild“ können wir festlegen ein Bild als Hintergrund eines Containerelements. Wenn Sie die Eigenschaft „Hintergrundgröße“ auf „Abdecken“ setzen, wird die Größe des Bildes automatisch an den Container angepasst, während das Seitenverhältnis beibehalten wird.

Bildgröße ändern

Das Mit dem Tag kann ein Bild in eine Webseite eingebettet werden. Durch Angabe der Breiten- und Höhenattribute können wir die gewünschten Abmessungen explizit festlegen. Dies kann jedoch zu einer Verzerrung des Bildes führen, wenn das ursprüngliche Seitenverhältnis nicht beibehalten wird.

Techniken kombinieren

Um sowohl die Größenänderung als auch das Zuschneiden zu erreichen, können wir die oben genannten Methoden kombinieren. Wir erstellen ein Containerelement mit der Eigenschaft „Hintergrundbild“ und der gewünschten Hintergrundgröße. Im Container platzieren wir ein Element mit kleineren Abmessungen als der Behälter. Durch sorgfältiges Anpassen der Randeigenschaften des Element können wir das Bild effektiv auf die gewünschte Größe zuschneiden und dabei das ursprüngliche Seitenverhältnis beibehalten.

Beispiel

Der folgende Code zeigt, wie man die Größe eines Bildes ändert und es zuschneidet:

.crop {
  width: 200px;
  height: 150px;
  overflow: hidden;
}

.crop img {
  width: 400px;
  height: 300px;
  margin: -75px 0 0 -100px;
}

<div class="crop">
  <img src="https://i.sstatic.net/wPh0S.jpg" alt="Your image">
</div>

In diesem Beispiel enthält das Containerelement (

) mit den Abmessungen 200 x 150 Pixel ein Bild () mit den Abmessungen 400 x 300 Pixel. Indem Sie den Überlauf im Container auf „Ausgeblendet“ setzen, wird das Bild zugeschnitten, und indem Sie die Randeigenschaften des Element wird die Größe des resultierenden Bilds effektiv geändert und zugeschnitten, um in den Container zu passen und gleichzeitig sein Seitenverhältnis beizubehalten.

Das obige ist der detaillierte Inhalt vonWie kann ich mit HTML und CSS die Größe von Bildern ändern und sie zuschneiden und dabei das Seitenverhältnis beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html if while using Property this overflow margin background

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn