Изменение размера изображения с помощью CSS в Chrome, есть ли способ это исправить?

Question

Я показываю некоторые значки из внешних доменов на моем сайте.Проблема в том, что когда значок отличается от 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 больше подходит для хрома

Answer 2

Может решить вашу проблему:

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