internet explorer - IE10 not using correct priority for max-width and min-width -
i'm creating responsive website , want images take @ 2/3 of column, not smaller 300px wide (or larger original image width). i'm using following css: img {max-width:66%;min-width:300px;} in chrome + firefox, works - starting wide, image displays @ uploaded size; when 2/3 of column, starts shrinking until hits 300px, doesn't shrink further. in ie10, image continues shrink past 300px - ignores 300px altogether. is there way ie10 can understand min-width should take priority? fiddle: http://jsfiddle.net/whdsm/3/ note using width:66% isn't option, since there no way of saying 'don't display larger uploaded'. you don't need set max-width in case, width . img { width: 66%; min-width:300px; } works in ie10: http://jsfiddle.net/whdsm/9/ "note using width:66% isn't option, since there no way of saying 'don't display larger uploaded'." there's bit of logic issue here well. max-width ...