Manchmal ist es erforderlich, ein Bild in eine bestimmte vorgegebene Dimension einzupassen. Wir können die Größe des Bildes ändern, indem wir die Breite und Höhe eines Bildes angeben. Eine gängige Lösung ist die Verwendung von maximale Breite: 100 %; Und Höhe: automatisch; sodass große Bilder die Breite ihres Containers nicht überschreiten. Der maximale Breite Und maximale Höhe Eigenschaften von CSS funktionieren besser, werden aber von vielen Browsern nicht unterstützt.
Eine andere Möglichkeit, die Bildgröße zu ändern, ist die Verwendung von Objektgerecht Eigenschaft, die zum Bild passt. Diese CSS-Eigenschaft gibt an, wie die Größe eines Videos oder Bilds angepasst wird, damit es in das Inhaltsfeld passt. Es definiert, wie ein Element mit einer festgelegten Breite und Höhe in den Container passt.
Der Objektgerecht Die Eigenschaft wird im Allgemeinen auf Bilder oder Videos angewendet. Diese Eigenschaft definiert, wie ein Element auf die Breite und Höhe seines Containers reagiert. Hauptsächlich gibt es fünf Werte von Objektgerecht Eigentum wie z füllen, enthalten, abdecken, keine, verkleinern, initial , Und du erbst . Der Standardwert dieser Eigenschaft ist 'füllen' .
Beispiel
In diesem Beispiel ändern wir die Größe des Bildes mithilfe von maximale Breite: 100 %; Und Höhe: automatisch; Eigenschaften.
cell padding div { width: auto; text-align: center; padding: 15px; border: 3px solid red; } img { max-width: 100%; height: auto; } <img src="forest.webp"> Testen Sie es jetzt Ausgabe
Beispiel
In diesem Beispiel verwenden wir die Objektanpassung: Abdeckung; Eigentum.
div { width: 300px; height: auto; text-align: center; padding: 15px; border: 3px solid red; } img { object-fit: cover; } <img src="forest.webp" width="300" height="300"> Testen Sie es jetzt Ausgabe
Im obigen Beispiel haben wir das verwendet Abdeckung Wert der Objektgerecht Eigentum. Ähnlich wie im obigen Beispiel können wir die anderen Werte von verwenden Objektgerecht Eigenschaft, um die Größe des Bildes zu ändern.