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

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

下次还敢
下次还敢original
2024-04-25 14:48:13727parcourir

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 faire en sorte que les images soient mises à l'échelle dans des proportions égales avec CSS

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-widthmax-height 属性,或使用 object-fit 属性。

详细展开回答:

1. 使用 max-widthmax-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
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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn