Why is my image width not inheriting from the parent width of the div

Question

Guys I have a div like this:

<div id="image-container"> <img id="image" src="#" > //with an image inside </div> 

And the style is this way:

 #image-container { width: 750px; height: 360px !important; text-align: center; } 

But when I load the page and check the element on the image to find out its sizes, here is what it says:

 element.style { height: 600px; width: 600px; } 

Why doesn't the image inherit the width of the div? And I cannot manually fit the desired image width for some reason, so I cannot do this:

 #image { width : 330px; //manually putting width height: 303px; //same same which i cannot do this for some reason } 

Any idea why and how to solve this?

I tried the solution below:

and here is what I get from the validating element:

 #image { height: inherit; // crossed-out width: inherit; // crossed-out } 

Something is overwriting the dimensions of my image.

Answer 1

Try FIDDLE

 #image-container { width: 750px; height: 360px !important; text-align: center; overflow: hidden; } #image-container img{ width: inherit; } 

Answer 2

 #image-container img { width: inherit; } 

script: about width inheritance

Answer 3

You must set the width and height properties of your images to either 100% , inherit , or the same values ​​so that it completely fills the space of the parent.

 #Container { width: 200px; height: 200px; } #Image { width: inherit; height: inherit; } 

You can check it out on this fiddle . In addition, make shure does not load other CSS into the document.

Answer 4

(In case I forgot how)

I am using bootstrap 3. I have a column with a width of 768 pixels. My markup looks like this:

 <div class="col-lg-8"> <img src="path/to/image.png" /> </div> 

setting the width to 100% will blur other images (especially with a small width). Therefore, my solution uses the max-width property:

 // parent div width is currently 768px. img { max-width: 100% } 

Thus, other images (have a small width) will use their exact width.

Answer 5

 #image { width: 100%; height: 100%; } 

Enough