div занимает больше места, чем нужно

Question

имеем небольшой код:

<div>
    <img src="http://pngimg.com/uploads/tree/tree_PNG2517.png" width="30%"> 
</div>
<style>
    div{
        border: 1px solid red;
        display: inline-block;
    }
</style>

Как сделать так, чтобы div занимал площадь == площади картинки ?

Answer 1

width="30%" - это ширина от родительского элемента Попробуйте поставить DIV-у свойство width:30%, а изображению width:100% Либо для картинки укажите точную ширину.

Также в CSS есть свойства с привязкой к размерам экрана например vw Relative to 1% of the width of the viewport

https://www.w3schools.com/cssref/css_units.asp

БЛОГ НА HUSL

div занимает больше места, чем нужно

Ответы (1 шт):