CSS img max-width: 100%

Question 1

Si l'on précise max-width: 100% pour un élément de l'image (par exemple une image de 250px * 500px) et nous avons mis cette image à l'intérieur d'un élément parent de la largeur de 1000px, alors si le parent est rétréci <= 500px, l'image sera réduit en conséquence à occuper toute la longueur de la société mère. Toutefois, si le parent est la largeur est > 500px, l'image ne sera pas mis à l'échelle, mais, à son origine 500px.

Ce qui me confond est le sens de l'100% ici. De ma compréhension, le pourcentage relatif est toujours en rapport à son parent. N'est-il pas dire que la largeur maximale est toujours la largeur de son parent? Ainsi, l'image sera toujours rétréci/mise à l'échelle pour s'adapter à leurs parents parce que la largeur maximale est de 100%? Que suis-je malentendu ici? comment comprendre la relative pourcentage utilisé dans max-width dans ce cas? Qu'est-ce que par rapport à? Merci!

Question 2

Oui, il y a une différence entre width et max-width.

Cette définition de w3school, il sera facile pour vous de comprendre.

https://www.w3schools.com/cssref/pr_dim_max-width.asp

L' max-width propriété définit la largeur maximale d'un élément.

Si le contenu est plus grand que la largeur maximale, il sera automatiquement modifier la hauteur de l'élément.

Si le contenu est plus petit que la largeur maximale, le max-width la propriété n'a aucun effet.

Remarque: Cela empêche la valeur de la width propriété de devenir plus grand que max-width. La valeur de la max-width propriété remplace l' width de la propriété.

Pour en venir à votre question maintenant, si vous remplacez max-width avec width et vérifiez la largeur de votre image pour point de rupture >=500px ou <500px, il sera bien-sûr de prendre les parents en pleine largeur.

Mais comme il est mentionné à partir de la définition ci-dessus, max-width fait en sorte que l'élément de la largeur de ne pas aller au-dessus d'une certaine largeur (peu importe ce qui est le parent de largeur) et c'est pourquoi cette propriété a été introduit dans.

Imran Rafiq Rather · Answer 1 · 2021-11-24T03:21:07

Oui, il y a une différence entre width et max-width.

Cette définition de w3school, il sera facile pour vous de comprendre.

https://www.w3schools.com/cssref/pr_dim_max-width.asp

L' max-width propriété définit la largeur maximale d'un élément.

Si le contenu est plus grand que la largeur maximale, il sera automatiquement modifier la hauteur de l'élément.

Si le contenu est plus petit que la largeur maximale, le max-width la propriété n'a aucun effet.

Remarque: Cela empêche la valeur de la width propriété de devenir plus grand que max-width. La valeur de la max-width propriété remplace l' width de la propriété.

Pour en venir à votre question maintenant, si vous remplacez max-width avec width et vérifiez la largeur de votre image pour point de rupture >=500px ou <500px, il sera bien-sûr de prendre les parents en pleine largeur.

Mais comme il est mentionné à partir de la définition ci-dessus, max-width fait en sorte que l'élément de la largeur de ne pas aller au-dessus d'une certaine largeur (peu importe ce qui est le parent de largeur) et c'est pourquoi cette propriété a été introduit dans.

vous devez sources officielles au lieu de cela, comme le W3C ou MDN. w3schools est inexacte.
@Raptor: j'admire votre conseiller, moi je préfère des sources officielles. Cependant MDN ou du W3C est encore pas mal pour les débutants. Nous avons tous commencé à partir de ces sites et avec le temps, cependant, nous avons remarqué w3c a quelques problèmes dans certains cas, mais pour un débutant de comprendre un point, je ne crois pas qu'il est mauvais de partager :) en tout cas, Merci

CSS img max-width: 100%

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie