HTML - 在注释部分完全不显示头像，他们切断 - 图像不完全

http://revive-blue-introblogger.blogspot.com/2010/07/demonstrating-all-theme-styles.html#comment-form HTML - 在注释部分完全不显示头像，他们切断 - 图像不完全

我试图在我的博客上安装这个主题，我注意到一个小问题显示以及容器。我已经编辑了上百次的代码，但我无法弄清楚问题所在。帮助将非常感谢！

来源

2014-02-21 coca cola

使用您的开发人员工具栏（Chrome）并检查图像。如果您没有看到图像出现任何问题，请调整DOM，直到看到问题。检查它们的宽度，高度，填充，边距以及“顶部”和“左侧”CSS属性。

此元素<div class="avatar-image-container vcard">具有max-height: 36px，它太小。

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

来源

2014-02-21 23:24:03 mpen

幅度并不影响它的大小。 – v42

@ v42：我直接在Chrome开发人员工具中编辑它。与溢出结合的边距：隐藏可以切断图像。 – mpen

不是这里的情况。 – v42

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

该图片还有height="35"内联，它不会影响Chrome，但可以删除。

来源

2014-02-21 23:30:34 v42

是的，但我找不到最大高度：36px任何地方 –

您正在限制身高，这就是为什么它被截断。

评论了这样的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定义尺寸的图像。

来源

2014-02-21 23:30:36

问题是，没有最大高度：36px或高度：37px。只有当您点击检查元素时才能看到它（当您从那里移除它时，图像将全部显示）。谢谢你的回答，tho –

删除这三个，它应该做的伎俩。我认为填充是其中一个主要的罪魁祸首。

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

1）从

2取出填充物）从.avatar-image-container

3卸下最大高度），你就大功告成了。使用设置进行游戏以获得理想的结果

enter image description here

来源

2014-02-21 23:33:59

我不知道，我不是这个模板的作者。无论如何，我删除了这三个，现在图像更宽。此外，底部边框出现，但左侧边框仍然被切断，图像高度过小。 –

嗯，那是因为你已经多次设置了图像的高度和宽度。为了保持宽高比，您只需要适合您的高度或宽度。无论如何，我告诉过你主要的罪魁祸首是什么，休息取决于你。打开检查元素或萤火虫（如果使用Firefox）并开始试验 –

另外，您可以发布更改吗？据我所知，删除所有这些影响很大的头像图像。 –

HTML - 在注释部分完全不显示头像，他们切断 - 图像不完全

回答

相关问题