<img> is acting strange

I have made a little gallery (http://www.kongeboa.dk/billeder/3/Coco/) If you refresh, and choose to view one of the other thumbnails below the actualy image, you will see that the image resizes randomly... I have a width on the image tag set to 100% I am sure,开发者_开发问答 that all the images has a size of 460px to fill the width of the design. When all thumbnails have been viewed, the big image shows in the correct size (460px)

The problem happens in Safari and Chrome. OSX and Windows.

I have no idea why this happens, and i dont know how to debug it...

In short: remove float: left; from the '.image' style.

Since the '.image' style makes the div containing the image float left, the 100% is relative to the size of a div which sizes to fit the image, so you'll probably get variable results in different browsers. If you remove the float: left; from the '.image' style, it'll fill 100% of the width, and the image will in turn fit 100% of its width, and everything should be grand.

You should remove float: left from .image.

It's some kind of WebKit bug from some combination of width="100%", the shrink-wrapping behaviour of float: left, and image caching.

Live Demo - (check it in Chrome, you'll see the image is full width)

If you know they've all got a width of 460px why not set width="460"? As far as I can recall percentages for img.width are not part of the HTML spec.

If you want to make sure the image always fills its container, then what you want is the CSS style width:100%.

I give it a try... Remove width="100%" from the img-tag and remove width:100%; from the .img class. Not sure if that solution would work for you?