CSS
main div.image {
display: block;
width: 100%;
}
main div.image img {
width: 100%;
height: auto;
}
HTML
<div class="image">
<img src="/images/nature-1.jpg" alt="">
</div>
Проблема в том, что этот код (да даже без любого CSS, просто картинка в другом теге) добавляют дополнительное пространство снизу родительского блока.
Вы можете заметить, что сама картинка уже "закончилась", но родительскому блоку все равно снизу добавляется некоторое свободное пространство. С чем это связано и как от этого избавиться - вопрос. Хотя, может быть, это нормально и добавляется вне зависимости от моего желания, прямо как margin'ы у p
. Хотя от них можно избавиться.
height: auto;
вроде не обязательно писать – stackanon 18 авг '16 в 10:47div.image
, при подсветке исключительноimg
отступа нет. – smellyshovel 18 авг '16 в 10:49