如何将最大宽度设置为百分比和像素？

Question

如何防止 div 的宽度扩展到超过一个百分比和一个像素？换句话说，浏览器应该计算像素值的百分比，然后选择两个值中较低的值。

如果我像这样设置它们：{max-width:100px;max-width:20%;} 资产管道将简单地选择第二个而忽略第一个。

Answer 1

width:20%;
max-width:100px;

这会将宽度设置为 20%，但上限为 100 像素。

Answer 2

这将不处理不同的图像sizes/aspect比率。如果您知道图像的大小，您可以分别定义 max-width 和 max-height。将此方法用于特定的图像组，但不作为一般规则。

实际示例：您 phone 中有 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 上测试。

Answer 3

实现此目的的一种方法是简单地使用两个 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>

Answer 4

我有一个特定的问题需要类似的解决方案。我需要以原始大小显示所有图像（独立于纵横比、位置或额外的 HTML 标记），最大宽度以像素为单位。如果屏幕小于这个固定尺寸，它应该缩小以适合。 IE。设置 width 不能满足要求。

扩展@Kiarutis 的回答：

img {
  max-width: 400px;
}

@media (max-width: 400px) {
  img {
    max-width: 100%;
  }
}

可在此处查看工作示例：https://jsfiddle.net/vrehxmpx/。在这个例子中有一个大于 400px 的图像（总是按比例缩小）和一个小于阈值的图像（只有当屏幕小于图像时才按比例缩小）。

要调整图像上的边距、边框和其他内容，只需增加 @media 的 max-width。

Answer 5

我的网站上有相同的宽度 "page wrap"。我希望它默认为 95% 宽度但不超过 1280px。这是我用 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;}}

Answer 6

不要这样做。

我相信所选答案对于 OP 描述的场景是正确的。但是，一些评论认为 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;
    }
}

Answer 7

您现在可以使用 css 分钟。但是要注意IE不支持。

width: min(20%, 100px)

https://developer.mozilla.org/en-US/docs/Web/CSS/min()

如何将最大宽度设置为百分比和像素？

How to set a max-width as percent AND pixels?

html

css

asset-pipeline