Buggy image resizing with CSS on Chrome, any way to fix it?

I'm displaying some favicons from external domains in my site. The problem is that when the favicon is anything different than 16px and I resize it the output is not always perfect. Randomly I get just the top or bottom half of the image, when I refresh suddenly the icon is displayed whole.

I h开发者_Python百科ave only experienced this problem in Chrome where it happens 90% of the time, I tested it on Firefox briefly and didn't seem to occur.

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

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

Is there a way to resize images without tearing?

there are actually several methods, 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" />

I suppose #3 is more suitable for chrome

May that can solve your problem:

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