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

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

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

2. 使用 object-fit 属性

img {
  object-fit: contain;
}

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

rrreee🎜L'attribut object-fit a les valeurs suivantes : 🎜🎜🎜🎜contain : 🎜L'image est mise à l'échelle le même rapport remplit complètement le conteneur tout en conservant le rapport hauteur/largeur de l'image. 🎜🎜🎜couverture : 🎜L'image est mise à l'échelle pour remplir complètement le conteneur, mais l'image peut être recadrée. 🎜🎜🎜fill : 🎜L'image s'étire pour remplir le conteneur, en ignorant le rapport hauteur/largeur de l'image. 🎜🎜🎜🎜Remarque : l'attribut 🎜🎜🎜🎜object-fit nécessite la prise en charge du navigateur et peut ne pas fonctionner dans les anciens navigateurs. 🎜🎜🎜Lorsque vous utilisez CSS pour mettre à l'échelle des images, vous devez faire attention aux points suivants : 🎜🎜🎜Le défilement peut entraîner une diminution de la qualité de l'image. 🎜🎜Si le rapport hauteur/largeur de l'image est différent de celui du conteneur, cela peut entraîner une distorsion de l'image. 🎜🎜La taille originale de l’image doit être utilisée autant que possible pour la meilleure qualité. 🎜🎜🎜🎜

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!