Почему дисплей: блокируйте высоту IMG в DIV на высоту DIV [дубликат] ⇐ CSS

[Anonymous]

div {
width: 50vw;
margin: 100px auto;
border: 2px solid red;
}

img {
width: 100%;
display: block;
}
< /code>

before and after psuedo elements




< /code>


The above image is without the display: block. you can notice a tiny gap in the bottom of the img between the img and the div.


Here the image is with the display: block which fits the height of the img to the height of the block.
width: 100% fits the width of the img to the weight of the day because they've is the parent element of Img. However height: 100% does not fit the height of the img to the height of the div. This maybe because for height: 100% to work as expected, the parent container must have a defined height. Here the parent container (which here is div) does not have a defined height, height: 100% will not work as expected, and the height of the image may not be constrained to the height of the container.
But display: block fits the height of the img to the height of the div. How ? I thought doesn't display: block only fit the width because block element stretches the horizontal width to the entire page or parent element. Why does display: block in fit the height of the image to the height of the div?
I tried fitting the height and width of the image to the height and width of the div. I did not understand how display: block fits the height of the image that to the height of the div. Don't block level element is just set the width ? Do they fit the height too? If yes, under what circumstances?

Подробнее здесь: https://stackoverflow.com/questions/760 ... e-height-o