css - 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 声明覆盖。在这种情况下，请使用开发人员工具或 Firebug 检查这些图像并检查它们是否仍然适用。您也可以添加!important到代码中（如width: auto !important;），但请记住仅在绝对必须时使用。

Answer 3

您可以尝试使用 background-image 在 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;
}

Answer 4

我有类似的问题，尝试了各种没有成功的建议。我想要一个 200px 的宽度，但没有样式。这最终对我有用。由于我的图像是 .png 格式，因此我根据 src 文件类型对图像进行了样式设置。

下面的代码将针对所有以 .png 结尾的 src 属性的 img 标签

img[src$=".png"] {
  width: 200px;
}