Maison >interface Web >tutoriel CSS >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
属性有以下几种值:
注意:
object-fit
max-width
et max-height
object-fit
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!