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
}

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

我都尝试过以下解决方案：

这是我从inspect元素得到的：

#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;
}

Answer 2

#image-container img { 
    width: inherit;
}

小提琴：about inheriting width

Answer 3

您应该将图片的width和height属性设置为100%，inherit或相同的值，以便它完全填充父级空间。

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

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

您可以在this fiddle上查看此内容。另外，make shure没有其他CSS加载到文档上。

Answer 4

（如果我忘了怎么办）

我正在使用bootstrap 3.我有一个宽度为768px的列。我的标记看起来像这样：

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

将宽度设置为100％将导致其他图像（尤其是宽度较小的图像）模糊。所以我的解决方案是使用max-width属性：

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

所以其他图像（宽度小）将使用它们的确切宽度。

Answer 5

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

足够

为什么我的图像宽度不是从父div宽度继承的

5 个答案: