IE10 does not use the correct priority for max-width and min-width

Question

I am creating a responsive website and want the images to occupy no more than 2/3 of their columns, but not be less than 300 pixels wide (or larger than the original image width).

I use the following CSS:

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

In Chrome + Firefox, this works fine - starting with a very wide one, the image is displayed according to its loaded size; then when it will be 2/3 of the column, it starts to decrease until it reaches 300 pixels, and then it does not decrease.

In IE10, the image continues to shrink to 300 pixels - it completely ignores 300 pixels.

Is there a way for IE10 to understand that the minimum width should take precedence?

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

Please note that using something like width: 66% is not an option, since then there is no way to say "do not show more than loaded".

Answer 1

In this case, you do not need to set max-width , just width .

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

works in IE10: http://jsfiddle.net/WHDsm/9/

"Please note that using something like width: 66% is not an option, because then there is no way to say" do not show more than loaded. "

Here's a bit of a logical problem. max-width and min-width usually mean redefinition of width in cases where the adaptive layout is used to ensure that the elements do not exceed or precede the fixed size that the user defines. The expression of an element can never exceed a certain percentage - this is a bad form, because the percentage coefficient is constant in relation to it of the parent element. It will always be 66% of its parent - unless you have min/max .

Setting width: 66%; max-width: 1000px; min-width 300px; width: 66%; max-width: 1000px; min-width 300px; gives you a range of values ​​based on the parent container if 66% this parent container is between 300px and 1000px. Ergo, if your user cannot load an image larger than width: 1000px; then the image will never expand beyond 1000 pixels and you will not see any problems with image quality.