Question: how to make the div # imgcont be img in size, while the width and height of the image were set in css 30%?

<div id="content" > <div id="imgcont"><img src="1.jpg"></div> <p>Sometext</p> </div>

  • explain what you want in size and what is 30%, otherwise it will not dock ... - Dmitry Polyanin
  • @DmitryPolyanin changed the question - igor_bal
  • one
    you can do .imgcont {display: inline-block; } then he is supposed to be in the size of the image - Dmitry Polyanin
  • I also first thought about display: inline-block, but it becomes equal in length to the browser (I do not know why) - igor_bal

2 answers 2

The red block has dimensions exactly in the picture, we test with the button "show / hide".

 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>

  • Honestly, I didn’t quite understand - igor_bal
  • @igor_bal asked for and added an example for comparison - Dmitry Polyanin
  • @igor_bal made the example even clearer - Dmitry Polyanin
  • Thank you very much - igor_bal
  • @igor_bal if the answer is right for you, mark it with a like and answer. - Dmitry Polyanin

This can be done like this ... Set img to the place of 30vw percent, and the parent width: max-content;

Browser support can be found here.

 #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>