<img src="https://placehold.it/50x20"> <div class="d1">Test1</div> <span class="s1">Test2</span>
img {
background-color: lightblue;
display: block;
}
.d1 {
background-color: blue;
}
.s1 {
background-color: orange;
display: block;
}
Ci-dessus, j'expérimente la propriété display: block; sur diverses balises. Je l'ai défini sur img et span mais, comme je le vois, l'image n'est pas étendue à l'extrême droite car span est ... Pourquoi est-ce vrai? Ty
3 Réponses :
S'il n'y a pas de paramètres largeur / hauteur, une image est affichée à sa taille d'origine, quel que soit le paramètre display , comme dans votre exemple. Si vous voulez qu'il s'étire sur toute la largeur de son conteneur, vous devez ajouter width: 100%
<img src="https://placehold.it/50x20"> <div class="d1">Test1</div> <span class="s1">Test2</span>
img {
background-color: lightblue;
display: block;
width: 100%;
height: auto;
}
.d1 {
background-color: blue;
}
.s1 {
background-color: orange;
display: block;
}
Parce que la largeur de la balise img s'oriente sur la largeur de l'image que vous chargez. Si vous souhaitez le dimensionner en bloc avec pleine largeur, vous devez ajouter l'attribut width avec une valeur de 100%. Mais vous verrez ... la hauteur de la balise d'image changera également pour empêcher le rapport hauteur / largeur.
<html>
<head>
<style>
<!--
img {
background-color: lightblue;
display: block;
width: 100%;
}
.d1 {
background-color: blue;
}
.s1 {
background-color: orange;
display: block;
}
-->
</style>
</head>
<body>
<img src="https://placehold.it/50x20">
<div class="d1">Test1</div>
<span class="s1">Test2</span>
</body>
</html>
Pour une explication précise, vous devez vous référer à la spécification et plus précisément à la partie traitant de l ' élément remplacé au niveau du bloc puisque img est un élément remplacé 1 ayant une valeur d'affichage calculée égale à block:
La valeur utilisée de
widthest déterminée comme pour les éléments remplacés en ligne. Ensuite, les règles pour les éléments de niveau bloc non remplacés sont appliquées pour déterminer les marges. ref
Puis pour les éléments remplacés en ligne
Si
heightetwidthont tous deux des valeurs calculées deautoet que l'élément a également une largeur intrinsèque, alors cette largeur intrinsèque est la valeur utilisée de 'width'.
Votre image a une largeur intrinsèque égale à 50px donc elle sera utilisée. Vous ne pouvez le remplacer qu'en spécifiant explicitement une largeur différente ( 100% si vous voulez la pleine largeur)
span et div sont des éléments non remplacés, leur largeur est donc définie comme suit:
Les contraintes suivantes doivent figurer parmi les valeurs utilisées des autres propriétés:
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = largeur du bloc conteneurSi
widthest défini surauto, toutes les autres valeurs "auto" deviennent0et "width" découle de l'égalité résultante. ref
Vous avez toute la valeur définie sur auto, donc nous mettons tout à 0 et nous obrain width = width of container block qui est votre comportement pleine largeur.
Le bloc contenant dans votre cas est essentiellement l'élément parent:
La position et la taille de la ou des boîtes d'un élément sont parfois calculées par rapport à un certain rectangle, appelé bloc conteneur de l'élément. Le bloc conteneur d'un élément est défini comme suit:
...
- Pour les autres éléments, si la position de l'élément est "relative" ou "statique", le bloc conteneur est formé par le bord du contenu de la boîte ancêtre du conteneur de bloc le plus proche. ref
1 En savoir plus sur l'élément remplacé:
Un élément dont le contenu sort du cadre du modèle de formatage CSS, tel qu'une image ou un document incorporé. Par exemple, le contenu de l'élément HTML img est souvent remplacé par l'image que son attribut src désigne. Les éléments remplacés ont souvent des dimensions intrinsèques: une largeur intrinsèque, une hauteur intrinsèque et un rapport intrinsèque. .. ref
Si vous inspectez l'élément avec vos outils de développement et survolez l'image, voyez-vous l'espace qui lui est réservé par le navigateur?