img嵌套在div CSS中

Question

我想防止div中嵌套的img被调整大小。这是我正在使用的CSS：

<div id="profile-gallery-image">
  <img src="..." />
</div

#profile-gallery-image {
border: 2px solid rgba(223,223,223,1);
width: 100px;
height: 100px;
overflow: hidden;
display: inline-block;

}

我得到的结果是：

真实图像比100x100框大。所以不管它在外面都应该隐藏起来。

Answer 1

尝试使用background-size属性锁定图像大小。

Answer 2

容器盒不是这里的情况，似乎通过CSS或通过一些JavaScript来调整图像的大小。

尝试使用以下样式：

#profile-gallery-image img {
    width: auto;
    height: auto;
}

如果此代码不起作用意味着它被JS或一些更具特色的CSS声明覆盖。在这种情况下，请使用Developer Tools或Firebug检查这些图像，并检查它们是否仍然适用。您还可以将!important添加到代码中（例如width: auto !important;），但请记住仅在您必须使用时才使用。

Answer 3

您可以尝试使用背景图像在div中显示图像，而不是使用单独的图像标记。

<div id="profile-gallery-image" style="background-image:url('images/imagename.jpg');">
</div>

#profile-gallery-image {
border: 2px solid rgba(223,223,223,1);
width: 100px;
height: 100px;
overflow: hidden;
display: inline-block;
background-repeat:no-repeat;
background-position:left;
}