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 属性

img {
  max-width: 100%;
  max-height: 100%;
}

使用这种方法，图片将自动等比例缩放以适应容器的大小，同时保持图像的宽高比。

2. 使用 object-fit 属性

img {
  object-fit: contain;
}

object-fit 属性有以下几种值：

• contain：图片等比例缩放以完全填充容器，同时保持图像的宽高比。
• cover：图片等比例缩放以完全填充容器，但可能会裁剪图片。
• fill：图片拉伸以填充容器，忽略图像的宽高比。

注意：

• object-fit
• Detaillierte Antwort:
  • 1. Verwenden Sie die Attribute max-width und max-height
  • rrreee
  Mit dieser Methode wird das Bild automatisch proportional sein Passt sich der Größe des Containers an und behält dabei das Seitenverhältnis des Bildes bei.
  2. Verwenden Sie das Attribut object-fit

rrreee🎜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!