CODEWITHSUNDEEP
csshtml
mnstrflkrn
mnstrflkrn

Reputation: 503

<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...

Upvotes: 2

Views: 167

Answers (4)

Fredrik
Fredrik

Reputation: 2016

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?

Upvotes: 0

thirtydot
thirtydot

Reputation: 228182

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)

Upvotes: 2

Jeff Parker
Jeff Parker

Reputation: 7507

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.

Upvotes: 4

Morgan Harris
Morgan Harris

Reputation: 2619

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%.

Upvotes: 0

Related Questions