Вопрос: как сделать так, чтобы div#imgcont был по размеру равен img, при этом width и height у изображения были заданы в css 30%?
<div id="content" >
<div id="imgcont"><img src="1.jpg"></div>
<p>Sometext</p>
</div>
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуВопрос: как сделать так, чтобы div#imgcont был по размеру равен img, при этом width и height у изображения были заданы в css 30%?
<div id="content" >
<div id="imgcont"><img src="1.jpg"></div>
<p>Sometext</p>
</div>
Красный блок имеет размеры ровно в картинку, тестируем кнопкой "показать/спрятать".
function toggle() {
document.getElementById('image1').classList.toggle('hidden');
return false;
}
.red {
display: inline-block;
background-color: red;
line-height: 0;
}
.hidden {
visibility: hidden;
}
<a href="#" onclick="return toggle();">показать/спрятать</a>
<br/>
<div class="red"><img id="image1" src="http://dosaaf34-tr.ru/wp-content/uploads/2017/09/1-31-300x184.jpg"></div>
Это можно реализовать так... Задать img
в место процентов 30vw
, а родителю
width: max-content;
О поддержке браузерами можно посмотреть тут
#imgcont {
margin: 0;
width: max-content;
border: 4px solid black;
}
img {
width: 30vw;
height: 30vw;
}
<div id="content">
<div id="imgcont"><img src="https://www.1zoom.ru/big2/34/322924-alexfas01.jpg"></div>
<p>Sometext</p>
</div>