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

css, html

Solution

Try this FIDDLE

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

#image-container img{ 
    width: inherit;
}

Problem

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.

Original source