HTML - 图像未完整显示答案

【问题标题】：HTML - Image is not displaying in fullHTML - 图像未完整显示
【发布时间】：2014-03-23 17:13:57
【问题描述】：

http://revive-blue-introblogger.blogspot.com/2010/07/demonstrating-all-theme-styles.html#comment-form

我试图在我的博客上安装这个主题，我注意到一个小问题 - 评论部分中的头像没有完整显示，它们和容器一样被切断了。我已经编辑了代码一百次，但我就是不知道问题出在哪里。非常感谢您的帮助！

【问题讨论】：

标签： html css image blogspot avatars

【解决方案1】：

使用您的开发者工具栏 (Chrome) 并检查图像。如果您没有看到图像有任何问题，请检查 DOM，直到您发现问题为止。检查它们的宽度、高度、内边距、边距以及“顶部”和“左侧”CSS 属性。

这个元素<div class="avatar-image-container vcard"> 的max-height: 36px 太小了。

即使图像是 45x45，图像元素本身也具有 35x35 的宽度和高度属性。

【讨论】：

边距不影响它的大小。
@v42：我直接在 Chrome 开发者工具中编辑了它。与overflow:hidden结合的margin绝对可以截断图片。
@v42: ...你是对的。这是我所做的其他更改之一。不过……总的来说，这是需要注意的。从我的答案中删除了那一点。
当我打开 Inspect Element 并从那里删除 overflow:hidden 时，我可以看到完整的图像，但是当我在编辑器中打开模板时，我找不到 overflow:hidden 或 max-height： 36px，所以我无法删除它们。无论如何，谢谢你的回答，@Mark
@cocacola：工具栏应该给你一个行号。看起来你的一些 CSS 被压缩了。您可以使用源映射或未压缩的 CSS 进行开发来解决此问题。如果这不是一个选项，请在 *widget_css_bundle.css 中搜索“.cmets .avatar-image-container”。这应该可以帮助您找到max-width:36px 位。继续搜索选择器，直到找到它们。 CSS 美化器也可能对您有所帮助。

【解决方案2】：

.comments .avatar-image-container 有 max-height:36px。删除它，否则你的头像将被砍掉，因为这个元素有overflow:hidden。

图片还有height="35" inline，对chrome没有影响，但是可以去掉。

【讨论】：

是的，但我在任何地方都找不到 max-height:36px

【解决方案3】：

你限制了高度，这就是它被截断的原因。

注释掉height这样的规则：

#comments-block .avatar-image-container {
  left: -41px;
  width: 48px;
  /* height: 48px; */
  margin-top: 25px;
}

.comments .avatar-image-container {
  float: left;
  /* max-height: 36px; */
  overflow: hidden;
  width: 36px;
}

#comments-block .avatar-image-container {
  /* height: 37px; */
  left: -45px;
  position: absolute;
  width: 37px;
}

关闭这 3 个规则会显示您在规则 #comments-block .avatar-image-container img 中定义的尺寸的图像。

【讨论】：

问题是没有max-height:36px或者height:37px。您只能在单击检查元素时看到它（当您从那里删除它时，图像会完整显示）。谢谢你的回答，虽然

【解决方案4】：

删除这三个，它应该可以解决问题。我认为填充是这里的主要罪魁祸首。

#comments-block .avatar-image-container img {
border-width: 3px 0 3px 3px;
height: 48px;
padding: 5px;
}

1) 从

中删除填充

2) 从.avatar-image-container 中移除 max-height

3) 你完成了。玩设置以获得所需的结果。

【讨论】：

我不知道，我不是这个模板的作者。无论如何，我删除了这三个，现在图像更宽了。另外，底部边框出现了，但左边的边框仍然被切断，图像高度太小。
嗯，那是因为你已经多次设置了图像的高度和宽度。为了保持纵横比，您只需要适合您的高度或宽度。无论如何，我告诉你罪魁祸首是什么，休息取决于你。打开检查元素或萤火虫（如果使用火狐）并开始试验
另外，您可以发布更改吗？而且据我所知，去除所有这些对头像的影响很大。
谢谢你的回答，我看看我能做什么
等等，您之前使用的是实际图像，现在您使用的是背景图像吗？为什么要在实际图像标签上使用背景图像？为了使背景图像正常工作，您需要为其容器提供所需的高度，然后在需要时指定 background-size 和 background-position