Comment faire en sorte que les images soient mises à l'échelle dans des proportions égales avec CSS

En utilisant les attributs max-width et max-height ou object-fit, vous pouvez redimensionner l'image proportionnellement en CSS et conserver les proportions de l'image.

Comment utiliser CSS pour que les images soient mises à l'échelle proportionnellement

Répondez directement à la question :

Pour que les images soient mises à l'échelle proportionnellement en CSS, vous pouvez utiliser max-width code> et la propriété max-height, ou utilisez la propriété 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
• Réponse détaillée :
  • 1. Utilisez les attributs max-width et max-height
  • rrreee
  En utilisant cette méthode, l'image sera automatiquement proportionnelle. S'adapte à la taille du conteneur tout en conservant les proportions de l'image.
  2. Utilisez l'attribut object-fit

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!