4

我正在创建一个响应式网站，并希望图像最多占据其列的 2/3，但不小于 300 像素宽（或大于原始图像宽度）。

我正在使用以下 CSS：

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

在 Chrome + Firefox 中，这可以完美运行 - 从非常宽开始，图像以其上传的大小显示；然后当它是列的 2/3 时，它开始收缩，直到达到 300 像素，然后不再进一步收缩。

在 IE10 中，图像继续缩小到 300px 以上 - 它完全忽略了 300px。

IE10 有什么方法可以理解 min-width 应该优先吗？

小提琴：http: //jsfiddle.net/WHDsm/3/

请注意，不能使用诸如 width:66% 之类的选项，因为从那时起就没有办法说“不要显示大于上传的内容”。

4

1 回答 1

-1

在这种情况下您不需要设置max-width，只需width.

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

适用于 IE10：http: //jsfiddle.net/WHDsm/9/

“请注意，不能使用像 width:66% 这样的选项，因为从那时起就没有办法说‘不要显示大于上传的内容’。”

这里也有一点逻辑问题。 max-width并且min-width通常意味着width在使用响应式布局以确保元素不超过或不超过用户定义的固定尺寸的情况下覆盖。说一个元素永远不能超过某个百分比是不好的形式，因为百分比与其父元素的比率是恒定的。min/max除非您已定义，否则它将始终为其父元素的 66% 。

当父容器在 300 像素和 1000 像素之间时，设置width: 66%; max-width: 1000px; min-width 300px;会根据父容器为您提供一系列值66%。因此，如果您的用户不能上传大于 的图片width: 1000px;，那么图片将永远不会扩展超过 1000 像素，并且您不会看到任何图片质量问题。

于 2013-11-22T15:49:19.390 回答