Heim >Web-Frontend >CSS-Tutorial >Wie man Bilder mit CSS proportional skaliert
Mit den Attributen „max-width“ und „max-height“ oder „Object-Fit“ können Sie das Bild in CSS proportional skalieren und das Seitenverhältnis des Bildes beibehalten.
So verwenden Sie CSS, um Bilder proportional zu skalieren
Beantworten Sie die Frage direkt auf den Punkt:
Um Bilder in CSS proportional zu skalieren, können Sie max-width verwenden. code> und max-height
-Eigenschaft oder verwenden Sie die Eigenschaft object-fit
. max-width
和 max-height
属性,或使用 object-fit
属性。
详细展开回答:
1. 使用 max-width
和 max-height
属性
<code class="css">img { max-width: 100%; max-height: 100%; }</code>
使用这种方法,图片将自动等比例缩放以适应容器的大小,同时保持图像的宽高比。
2. 使用 object-fit
属性
<code class="css">img { object-fit: contain; }</code>
object-fit
属性有以下几种值:
注意:
object-fit
max-width
und max-height
object-fit
object-fit
hat die folgenden Werte: 🎜🎜🎜🎜enthalten: 🎜Das Bild ist skaliert auf das gleiche Verhältnis Füllt den Container vollständig aus und behält dabei das Seitenverhältnis des Bildes bei. 🎜🎜🎜Cover: 🎜Das Bild ist so skaliert, dass es den Container vollständig ausfüllt, das Bild ist jedoch möglicherweise beschnitten. 🎜🎜🎜fill: 🎜Das Bild wird gestreckt, um den Container auszufüllen, wobei das Seitenverhältnis des Bildes ignoriert wird. 🎜🎜🎜🎜Hinweis: 🎜🎜🎜🎜object-fit
-Attribut erfordert Browserunterstützung und funktioniert möglicherweise nicht in älteren Browsern. 🎜🎜🎜Wenn Sie CSS zum Skalieren von Bildern verwenden, müssen Sie die folgenden Punkte beachten: 🎜🎜🎜Scrollen kann zu einer Verschlechterung der Bildqualität führen. 🎜🎜Wenn das Seitenverhältnis des Bildes von dem des Containers abweicht, kann es zu einer Verformung des Bildes kommen. 🎜🎜Für die beste Qualität sollte nach Möglichkeit die Originalgröße des Bildes verwendet werden. 🎜🎜🎜🎜Das obige ist der detaillierte Inhalt vonWie man Bilder mit CSS proportional skaliert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!