html - 在 Chrome 上使用 CSS 调整图像大小有问题，有什么办法可以解决吗？

Question

我正在我的站点中显示一些来自外部域的网站图标。问题是，当 favicon 与 16px 不同并且我调整它的大小时，输出并不总是完美的。随机地我只得到图像的上半部分或下半部分，当我突然刷新时图标显示整个。

我只在 Chrome 中遇到过这个问题，90% 的情况下它都会发生，我在 Firefox 上简单地测试了一下，但似乎没有发生。

<style>
.icon {
width: 16px;
height: 16px;
</style>

<img class="icon" src="http://getfavicon.appspot.com/http://curiousphotos.blogspot.com/2010/07/creative-gizmos.html">

有没有办法在不撕裂的情况下调整图像大小？

Answer 1

其实有几种方法，1

<style>
.icon {
width: 16px;
height: 16px;
}
</style>

2

<style>
.icon {
max-width: 16px;
max-height: 16px;
}
</style>

3

<img width="16" height="16" class="icon" src="http://getfavicon.appspot.com/http://curiousphotos.blogspot.com/2010/07/creative-gizmos.html" />

我想#3 更适合 chrome