为什么我的图片宽度不会继承父div宽度 [英] Why doesn't my image width inherit from parent div width

问题描述

我有这样的div：

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

以这种方式设计：

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

为什么图片不会继承div的宽度？我不能手动放置所需的图像宽度的某些原因，所以我不能这样做：

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:

这里是我从检查元素：

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

有些东西覆盖了我的图片尺寸。

Something is overwriting my image dimensions.

推荐答案

尝试此 FIDDLE

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

#image-container img{ 
    width: inherit;
}

这篇关于为什么我的图片宽度不会继承父div宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！