Wie kann ich die Größe von Bildern ändern und sie auf bestimmte Abmessungen zuschneiden, indem ich nur CSS verwende?

Anzeigen geänderter und zugeschnittener Bilder mit CSS

Anforderung:Zeigen Sie ein Bild von einer URL mit angegebener Breite und Höhe an , unabhängig vom ursprünglichen Seitenverhältnis. Die Größe des Bildes sollte geändert und dann auf die gewünschten Abmessungen zugeschnitten werden.

Lösung:Kombinieren Sie die Eigenschaften „img“ und „Hintergrundbild“:

• Verwenden Sie „img“, um die Größe zu ändern das Bild unter Beibehaltung seines Seitenverhältnisses.
• Verwenden Sie „Hintergrundbild“, um das verkleinerte Bild auf die gewünschte Größe zuzuschneiden Größe.

Beispiel:

Betrachten Sie ein Bild mit den Abmessungen 800 x 600 Pixel, das wir als 200 x 100 anzeigen möchten Pixel.

HTML:

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

CSS:

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

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

Erklärung:

• Die .crop-Klasse definiert den Container für das Bild mit seiner gewünschte Breite und Höhe.
• Das img-Element wird verwendet, um die Größe des Bildes unter Beibehaltung seines Seitenverhältnisses zu ändern. Die Breite und Höhe werden so eingestellt, dass das ursprüngliche Größenverhältnis erhalten bleibt.
• Die negativen Ränder werden auf das img-Element angewendet, um es innerhalb des .crop-Containers zu zentrieren und zuzuschneiden. Die Ränder werden basierend auf der vollen Größe des Originalbilds (400 x 300 Pixel) und der gewünschten Anzeigegröße (200 x 100 Pixel) berechnet.

Dieser Ansatz ermöglicht es Ihnen, die Größe von Bildern dynamisch zu ändern und zuzuschneiden, um sicherzustellen Sie werden auf verschiedenen Geräten in der gewünschten Größe und im gewünschten Seitenverhältnis angezeigt.

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