我正在创建一个响应式网站，并希望图片最多占据其列的2/3，但不能小于300px宽（或大于原始图像宽度）。
我正在使用以下CSS：
img {max-width:66%;min-width:300px;}
在Chrome + Firefox中，这种方式非常有效 - 从非常宽的方面开始，图像以上传的大小显示;然后当它是列的2/3时，它开始收缩直到达到300px，然后不再收缩。
在IE10中，图像继续缩小超过300px - 它完全忽略了300px。
IE10是否可以理解min-width应该优先考虑？
小提琴：http://jsfiddle.net/WHDsm/3/
请注意，使用宽度：66％这样的东西不是一种选择，因为那时没有办法说“不要显示大于上传的内容”。
答案 0 :(得分：-1)
在这种情况下，您无需设置max-width，只需width。
img {
width: 66%;
min-width:300px;
}
适用于IE10：http://jsfiddle.net/WHDsm/9/
“请注意，使用宽度：66％不是一种选择，从那时起 没有办法说'不要显示大于上传'。“
这里也存在一些逻辑问题。在使用响应式布局确保元素不超出或超出用户定义的固定维度的情况下，max-width和min-width通常表示为width的覆盖。说一个元素永远不会超过某个百分比是不好的形式，因为百分比与它的父元素的比例是恒定的。它将始终是其父元素的66％ - 除非您定义了min/max。
当父容器的width: 66%; max-width: 1000px; min-width 300px;介于300px和1000px之间时，设置66%会根据父容器为您提供一系列值。例如，如果您的用户无法上传大于width: 1000px;的图片，那么该图片将永远不会超过1000像素，您将看不到任何图像质量问题。