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 属性有以下几种值：

• 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

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!