img 嵌套在 div CSS 中答案

【问题标题】：img nested inside div CSSimg 嵌套在 div CSS 中
【发布时间】：2021-11-03 19:39:35
【问题描述】：

我想防止 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 的盒子大。所以不管外面是什么，都应该隐藏起来。

【问题讨论】：

Overflow:hidden 在大多数情况下完全按照您的要求进行操作，因此肯定有其他事情发生。您能否发布您所有的 HTML，以便我们在上下文中查看 tee 问题？
可能还会补充说我正在使用 twitter-bootstrap。只是让我感到震惊，也许图像不能相互重叠，如果我创建 100x100 的 div 标签并且它适合例如连续 5 个，那么图像的实际尺寸会相互碰撞吗？只是一个想法。
即使您添加的代码应该也可以工作。你能把所有的代码都贴出来吗？
stackoverflow.com/questions/11500726/… 好像其他人也有同样的问题。

标签： css

【解决方案1】：

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

【讨论】：

似乎无法正确处理。尝试将上述 css 属性应用于 div 标签和 img 标签。能不能说的具体点？

【解决方案2】：

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

尝试使用以下样式：

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

如果此代码不起作用，则意味着它被 JS 或一些更具体的 CSS 声明覆盖。在这种情况下，请使用开发人员工具或 Firebug 检查这些图像并检查它们是否仍然适用。您也可以将!important 添加到代码中（如width: auto !important;），但请记住仅在绝对必要时才使用。

【讨论】：

【解决方案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;
}

【讨论】：

如果图像重复，我认为使用 ID 而不是 Divs 的类不是一个好主意。

【解决方案4】：

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

下面的代码将针对 所有 img 标签，其中 src 属性以 .png

结尾

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

【讨论】：