Question

我是后端开发人员，可以使用一些CSS帮助。

我有一个徽标只能在Chrome中显示像素化吗？

有人对此有任何建议或解决方案吗？

网站位于

尝试更改CSS，但在向下滚动时无法自动调整大小

CSS

#logo {
display: inline-block;
float: none;
max-height: 54%;
margin-bottom: 0;
vertical-align: middle;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
-webkit-transform: translate3d(0,0,0); 
}

img {
max-width: 100%;
height: auto; 
}

HTML

<a href="https://empowermetamela.com/">                     
  <img src="https://empowermetamela.com/wp-content/uploads/2019/04/empower-me-tamela-logo.png" alt="Empower Me ~ Tamela" id="logo" data-height-percentage="73" />
</a>

需要徽标才能在Chrome中顺利显示

Answer 1

此行引起了该问题：

-webkit-transform: translate3d(0,0,0);

如果没有必要，我将其删除。如果这不是一个选择，那么正如Pete在其评论中提到的那样，这可能是SVG的一个不错的选择，并且/或者将其大小基于宽度而不是高度。

Answer 2

您可以尝试使用#logo img

-ms-transform: scale(1); /* IE 9 */
-webkit-transform: scale(1); /* Safari */
transform: scale(1);

希望它对您有用：）

徽标在Chrome而不是Firefox或IE中显示为像素化

2 个答案: