Как сделать div по размеру img?

#html #css

Вопрос: как сделать так, чтобы div#imgcont был по размеру равен img, при этом width
и height у изображения были заданы в css 30%?




     

     
Sometext




    

Ответы

Ответ 1

Красный блок имеет размеры ровно в картинку, тестируем кнопкой "показать/спрятать".



function toggle() {
  document.getElementById('image1').classList.toggle('hidden');
  return false;
}
.red {
  display: inline-block;
  background-color: red;
  line-height: 0;
}

.hidden {
  visibility: hidden;
}
показать/спрятать







Ответ 2

Это можно реализовать так... Задать img в место процентов 30vw, а родителю 
width: max-content;

О поддержке браузерами можно посмотреть тут



#imgcont {
  margin: 0;
  width: max-content;
  border: 4px solid black;
}

img {
  width: 30vw;
  height: 30vw;
}

  

  
Sometext