Html 图像渲染随着比例的变化而变化

这是该页面的一个示例：

我这里的问题是，图像渲染更改为“图像渲染：像素化”；而图像的大小调整（当您将鼠标悬停在某个图像上时）以及图像上的大小调整更改回正常值时。 （例如，当您将鼠标悬停在Youtube上时，您可以非常清楚地看到这一点）

我不希望它是像素化的，我希望在鼠标悬停的过程中图像渲染是正常的

这是我的HTML（用React制作）：

---

您认为问题出在哪里？

尝试添加

-webkit背面可见性：隐藏到你的imgyou可以尝试
将改变：转换打开
。原始图标显示img
。这会通知浏览器即将发生更改，这可能有助于解决您的问题。不过，最好不要在页面上过度使用此属性，因为它会降低性能。最简单的方法是设置
宽度
和
高度
的动画，而不是变换。不要忘记补偿该区域
a
元件的宽度损失case@Pepo_rasta这使图像看起来总是pixalted，但我希望看起来更平滑（就像我不悬停时的样子）@heatherhtml如上所述，图像是pixalted^
<li className="original-icon-li">
   <a href={props.hrefProp}>
      <img src={"/images/classicLogos/" + props.imageUrl} alt={props.imageUrl} />
   </a>
</li>

.original-icon-li {
    margin: 10px;
    display: inline-block;
    transition: all .5s;
}

.original-icon-li a {
    padding: 5px;
    display: inline-block;
    border: none;
    transition: all .5s;
}

.original-icon-li a img {
    width: 90px;
    height: 90px;
    display: block;
    transition: all .5s;
}

.original-icon-li a:hover img {
    transform: scale(0.88);
}