Why doesn't my image width inherit from parent div width

Question

Guys I have a div like this:

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

And styled this way:

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

But when i load the page, and inspect element on the image to know its dimensions, this is what it says:

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

Why doesnt the image inherit the width of the div? And I cant manually put the desired width of the image for some reason, so I cant do this:

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

Any idea why or how to solve this?

I all tried the solution below:

and here is what i get from inspect element:

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

Something is overwriting my image dimensions.

Answer 1

You should set your image's width and height properties to either 100%, inherit or the same values so it completely fills the space of the parent.

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

#Image {
    width: inherit;
    height: inherit;
}

You can check this on this fiddle. Also, make shure no other CSS is being loaded on the document.

Answer 2

Try this FIDDLE

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

#image-container img{ 
    width: inherit;
}