Wie kann ich Bilder nur mit CSS in der Größe ändern und zuschneiden?

Verwenden von CSS zum Ändern der Größe und Zuschneiden eines Bildes

In diesem Artikel erfahren Sie, wie Sie die Größe eines Bildes mithilfe von CSS ändern und zuschneiden können. Mit dieser Technik können Sie ein Bild mit einer bestimmten Breite und Höhe anzeigen, auch wenn das Originalbild ein anderes Seitenverhältnis hat.

Größe ändern und Zuschneiden eines Bildes

Um die Größe eines Bildes zu ändern und zuzuschneiden, Sie können eine Kombination der Eigenschaften „img“ und „background-image“ verwenden. Mit der img-Eigenschaft können Sie die Größe des Bildes ändern und dabei das Seitenverhältnis beibehalten. Mit der Eigenschaft „Hintergrundbild“ können Sie das Bild auf die gewünschte Größe zuschneiden.

Beispiel

Betrachten Sie das folgende Beispiel:

Dieses Bild hat eine Größe von 800x600 Pixel. Wir möchten es als Bild mit 200 x 100 Pixeln anzeigen.

Schritt 1: Größe des Bildes ändern

<br><img</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">style="width: 200px; height: 150px;" 
src="https://i.sstatic.net/wPh0S.jpg"></p>
<p>

Mit diesem Schritt wird die Größe geändert Bild auf 200 x 150 Pixel unter Beibehaltung des Seitenverhältnisses.

Schritt 2: Bild zuschneiden

<br><div</p><pre class="brush:php;toolbar:false">style="background-image:
       url('https://i.sstatic.net/wPh0S.jpg'); 
width:200px; 
height:100px; 
background-position:center;">&amp;nbsp;</div></p>
<p></ pre></p>
<p>In diesem Schritt wird das verkleinerte Bild auf 200 x 100 zugeschnitten Pixel.</p>
<h3>Kombinierter Ansatz</h3>
<p>Sie können diese beiden Techniken kombinieren, um das gewünschte Ergebnis zu erzielen. Zum Beispiel der folgende Code:</p>
<p><pre class="brush:php;toolbar:false"></p>
<pre class="brush:php;toolbar:false">.crop {
    width: 200px;
    height: 150px;
    overflow: hidden;
}

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

<div>