Wie kann ich die Größe eines Bildes ändern und es auf bestimmte Abmessungen zuschneiden, indem ich nur CSS verwende?

Ein mit CSS in der Größe geändertes und zugeschnittenes Bild anzeigen

Problem:

Sie möchten anzeigen ein Bild von einer URL mit einer bestimmten Breite und Höhe, auch wenn sein Seitenverhältnis von den gewünschten Abmessungen abweicht. Das Ziel besteht darin, die Größe des Bildes unter Beibehaltung seines ursprünglichen Verhältnisses zu ändern und es dann auf die gewünschte Größe zuzuschneiden.

CSS-Lösung:

Um sowohl die Größenänderung als auch das Zuschneiden zu erreichen, Sie können die folgenden Techniken kombinieren:

• Größenänderung:Verwenden Sie die Breite und Breite des HTML-img-Elements Höheneigenschaften, um die Größe des Bildes zu ändern. Dadurch bleibt das Seitenverhältnis des Originalbilds erhalten.
• Zuschneiden: Erstellen Sie ein Containerelement (z. B. ein Div) mit den gewünschten Endabmessungen. Legen Sie für diesen Container einen Überlauf von „versteckt“ fest, um überschüssiges Bild abzuschneiden.

Implementierung:

.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="Image">
</div>

In diesem Beispiel:

• Die Größe des Bildes wird auf eine Breite von 200 Pixel und eine Höhe von 150 Pixel (mit Seitenverhältnis) geändert beibehalten).
• Die Randeigenschaft wird verwendet, um das Bild durch Verschieben seiner Position innerhalb des Containers zuzuschneiden.
• Die Überlaufeigenschaft des Containers ist auf ausgeblendet eingestellt, um sicherzustellen, dass nur der gewünschte Teil des Bildes angezeigt wird wird angezeigt.

Ergebnis:

Mit dieser Kombination können Sie ein Bild zu einem bestimmten Zeitpunkt anzeigen Größe unter Beibehaltung des ursprünglichen Seitenverhältnisses und Zuschneiden auf die gewünschten Abmessungen.

Das obige ist der detaillierte Inhalt vonWie kann ich die Größe eines Bildes ändern und es auf bestimmte Abmessungen zuschneiden, indem ich nur CSS verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!