html - 为什么我的图像宽度不继承父 div 宽度

Question

伙计们，我有一个这样的 div:

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

并以这种方式设置样式:

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

但是当我加载页面并检查图像上的元素以了解其尺寸时，它是这样说的:

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

为什么图片不继承div的宽度？由于某种原因我无法手动放置所需的图像宽度，所以我不能这样做:

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

知道为什么或如何解决这个问题吗？

我都尝试了下面的解决方案:

这是我从检查元素中得到的:

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

有些东西正在覆盖我的图像尺寸。

Answer 1

试试这个 FIDDLE

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

#image-container img{ 
    width: inherit;
}