No replies
TripleM
TripleM's picture
Offline
newbie
Last seen: 6 years 19 weeks ago
Timezone: GMT+12
Joined: 2013-08-01
Posts: 1
Points: 2

Short version:

See: http://jsfiddle.net/WHDsm/3/

In Chrome + Firefox, as you get to a small content width, the grey image never displays at less than 300px wide.

In IE10, the image continues shrinking at 66% of the column size indefinitely, and ignores the 300px altogether.

Long version:

I'm coding up a responsive website design, and have what I would think is a typical use-case. People should be able to insert an image in their content, floated right, say.

Requirements:

a) I don't want the image to ever display larger than uploaded.
b) I want the image to shrink so that it doesn't take up more than 2/3 of the content width - until it hits 300px, which should be the minimum width of the image.

This seems simple with CSS:

img {max-width:66%;min-width:300px;}

In Firefox + Chrome, this works perfectly. According to the Firefox docs, min-width takes priority over max-width. Starting from a wide browser, it displays at full size, then shrinks when this is 66% of the column, until it hits 300px where it stops shrinking.

In IE10, min-width is ignored entirely; the image stays at 66% of the column width no matter how small the width gets.

If I replace max-width:66% with width:66%, it works at small widths. But then for large widths, the image keeps expanding above the original image source, and of course will get very blurry.

Any suggestions as to how to fix this in IE?