Как не заполнить все тело в браузере?

Question

div{ 
 
    overflow:hidden; 
 
    border:1px solid red; 
 
} 
 
img{ 
 
    width:160px; 
 
    height:160px; 
 
    padding:20px ; 
 
}

<div> 
 
    <img src="http://i.imgur.com/MnmGmN7.jpg" /> 
 
</div>

ДИВ заполнит все тело на моем светлячок.

Это не умный способ, когда заполнение img изменено на 40 пикселей, ширина div будет изменена на 160 + 40 + 40 = 240.

div{ 
    width:200px; 
    border:1px solid red; 
} 

Желаемый эффект такой, как показано ниже.

Answer 1

Используйте display: inline-block на div, и он будет расширяться до его con вместо его родительской ширины.

Примечание стороны, не забывайте требуемый атрибут alt="an image description"

div{ 
 
    display: inline-block;  /* added */ 
 
    overflow:hidden; 
 
    border:1px solid red; 
 
} 
 
img{ 
 
    width:160px; 
 
    height:160px; 
 
    padding:20px ; 
 
}

<div> 
 
    <img src="http://i.imgur.com/MnmGmN7.jpg" alt="image description"> 
 
</div>

Вы можете сделать это без DIV, а также, если это не требуется для конкретной цели.

img { 
 
    width:160px; 
 
    height:160px; 
 
    padding:20px ; 
 
    border:1px solid red; 
 
}

<img src="http://i.imgur.com/MnmGmN7.jpg" alt="image description">

Answer 2

Вот некоторые варианты:

Если вы хорошо с помощью intrinsic sizing, вы можете использовать fit-content. Однако IE/Edge не поддерживает эти значения вообще.

div { 
 
    border: 1px solid red; 
 
    width: -moz-fit-content; 
 
    width: -webkit-fit-content; 
 
    width: fit-content; 
 
} 
 
img { 
 
    width: 160px; 
 
    height: 160px; 
 
    padding: 20px; 
 
}

<div> 
 
    <img src="http://i.imgur.com/MnmGmN7.jpg" /> 
 
</div>

В качестве альтернативы, вы всегда можете указать размер на контейнере и сделать изображение процент контейнера, как так:

div { 
 
    border: 1px solid red; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
img { 
 
    width: 80%; 
 
    height: 80%; 
 
    padding: 10%; 
 
}

<div> 
 
    <img src="http://i.imgur.com/MnmGmN7.jpg" /> 
 
</div>