如何防止 div 的宽度扩大到超过一个百分比和一个像素？也就是说，浏览器应该计算百分比的像素值，然后选择两个值中较低的一个。
如果我像这样设置它们：{max-width:100px;max-width:20%;} 资产管道将简单地选择第二个并忽略第一个。
【问题讨论】：
标签： html css asset-pipeline
width:20%;
max-width:100px;
这会将宽度设置为 20%，但上限为 100 像素。
【讨论】：
max-width 在哪里？相反，答案只是定义了一个width，这是不同的。
20%，您仍然需要将 element 设置为 20% 宽，虽然这可能不是必需的或不想要的.如果px 和% 都有最大宽度，则不会出现这种行为。
实现这一点的一种方法是简单地使用两个 div
<div class="outer">
<div class="inner">
This content will not exceed 100px or 20% width.
</div>
</div>
<style>
.outer {
max-width: 90%;
}
.inner {
max-width: 100px;
}
</style>
【讨论】：
这将不适用于不同的图像尺寸/纵横比。如果您知道图像的大小，您可以分别定义 max-width 和 max-height。将此方法用于特定的图像组，但不作为一般规则。
实际示例：您将手机中的 5 张照片放置在一个页面中，并且您需要在屏幕的另一半部分显示一些文字。您将图像的大小减小到 500 像素宽和 300 像素高。您希望它们不超过屏幕的一半，并且在平板电脑上不超过 250 像素。计算最大高度：250*300/500=150px。
.img-class {
max-width: 50%;
}
@media (max-width: 800px) {
.img-class {
max-height: 150px;
}
}
在最新的 Chrome、Firefox 和 IE 上测试。
【讨论】：
我遇到了一个需要类似解决方案的具体问题。我需要以原始大小显示所有图像（与纵横比、位置或额外的 HTML 标记无关），最多以像素为单位设置最大宽度。如果屏幕小于这个固定尺寸，它应该缩小以适应。 IE。设置 width 将无法满足要求。
扩展@Kiaurutis 的回答：
img {
max-width: 400px;
}
@media (max-width: 400px) {
img {
max-width: 100%;
}
}
可以在这里看到一个工作示例：https://jsfiddle.net/vrehxmpx/。在这个例子中，有一个大于 400px 的图像（总是按比例缩小）和一个小于阈值的图像（只有在屏幕小于图像时才按比例缩小）。
要调整图像上的边距、边框和其他内容，只需增加@media 的max-width。
【讨论】：
您现在可以使用 css min。但是你应该注意IE不支持它。
width: min(20%, 100px)
【讨论】：
不要这样做。
我相信所选答案对于 OP 描述的场景是正确的。但是，一些 cmets 认为 OP 要求将max-width 属性设置为两个值中的较低值，而不是width。这也是可以的，请看下文。
注意：这个解决方案对我来说没有多大意义。请使用选定的答案，它正确演示了 max-width 的用途。下面的代码将确保 max-width 属性是 20% 或 100px 中的较小者。
img {
max-width: 20%;
}
@media (min-width: 500px){ /* at 500 pixels, 20% of the width will be 100px */
img {
max-width: 100px;
}
}
【讨论】：
我的网站上的“页面换行”宽度相同。我希望它默认为 95% 宽度，但不超过 1280 像素。这是我使用 CSS 制作的方法
.wrap{max-width:95%;margin:0px auto;}
@media screen and (max-device-width:1280px),screen and (max-width:1280px){.wrap{max-width:1280px;margin:0px auto;}}
【讨论】：