Html 为什么'；t我的图像宽度从父div width继承

伙计们，我有一个这样的部门：

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

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

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
}

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

我都尝试过下面的解决方案：

以下是我从inspect element得到的信息：

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

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

#image-container img { 
    width: inherit;
}

---

fiddle:

您应该将图像的

宽度

和

高度

属性设置为

100%

、

继承

或相同的值，以便完全填充父图像的空间

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

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

你可以查一下。另外，请确保文档中没有其他CSS加载到舒尔中。

试试这个

就足够了（以防我忘了怎么做）

我用的是bootstrap3。我有一个宽度为768px的列。我的标记如下所示：

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

因此，其他图像（宽度较小）将使用其精确宽度

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

#image-container img{ 
    width: inherit;
}

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

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

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