png 图像在标题中被切断答案

【问题标题】：png image being cut off in headerpng 图像在标题中被切断
【发布时间】：2018-09-24 02:15:38
【问题描述】：

在我们网站的标题中使用 png 图像作为我们的徽标。我遇到的问题是徽标中的文本（位于徽标中间）被截断。因此，就在“决议”一词的下方，第二行文字没有完全显示出来。

网站位于，徽标位于左上角。任何有关如何解决此问题的想法或建议表示赞赏。

#eut-main-header,
.eut-logo {
  height: 125px;
}

.eut-logo {
  display: block;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.eut-position-left {
  float: left;
}

【问题讨论】：

右键单击并单击检查。你会看到你height: 125px; 正在切图片
被切掉的不是图片，而是徽标中间的第二行文字，上面的字母被切掉了。整个徽标只是不显示“治疗服务”中字母的顶部
在 chrome 中，您的徽标在字母中间被切掉了。改变容器的高度修复它
能否附上你的截图
刚刚在原始帖子中添加了屏幕截图。这是从 Chrome 中获取的。 Safari 也一样。

标签： html css png

【解决方案1】：

这与图像大小和抗锯齿的工作原理有关。您可以通过更改原始图像的大小以匹配实际元素（即 169.22 x 110）来解决此问题，或者您可以更改容器元素的大小直到问题得到解决。

对于第二种解决方案，改变

.eut-logo a {...} 从 height: 110px; 到 height: 122px 有效。

【讨论】：

试过了，但还是有同样的问题。为清楚起见，它是徽标中间的第二行文本，其中字母的顶部被切断。整个徽标不显示“治疗服务”中字母的顶部，这是徽标中的第二行文字。
那你在某处做错了什么。该图像本机为 300x195，但您将其显示为 203 x 132（截至目前）。因此抗锯齿。您需要使它们匹配（对于解决方案一）。

【解决方案2】：

问题的原因是您用于徽标部分的 css 属性。您应该删除该行的高度或使用 auto 值。

您应该移除高度，或增加您的需要或使用 auto 以获得价值。

#eut-main-header, .eut-logo {
height: 125px;
}

【讨论】：

试过了，但还是有同样的问题。为清楚起见，它是徽标中间的第二行文字，其中字母的顶部被切断。整个徽标不显示“治疗服务”中字母的顶部，这是徽标中的第二行文字。