Question

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

如果我这样设置它们：{max-width:100px;max-width:20%;}资产管道只会选择第二个并忽略第一个。

Answer 1

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

这会将宽度设置为20％，但将其设置为100 px。

Answer 2

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

这将 NOT 使用不同的图像尺寸/宽高比。如果您知道图像的大小，则可以分别定义 max-width 和 max-height 。将此方法用于特定图像组，但不作为一般规则。

实际示例：手机中有5张照片放在一个页面中，您需要在屏幕的另一半显示一些文字。您将图像的大小减小到500px宽和300px高。您希望它们不超过屏幕的一半，而不是平板电脑上的250px。计算最大高度：250 * 300/500 = 150px。

.img-class {
    max-width: 50%;
}
@media (max-width: 800px) {
    .img-class {
       max-height: 150px;
    }
}

在最新的Chrome，Firefox和IE上测试过。

Answer 4

我遇到了一个需要类似解决方案的特定问题。我需要以原始大小显示所有图像（独立于宽高比，位置或额外的HTML标记），最大为设置的最大宽度（以像素为单位）。如果屏幕小于此固定尺寸，则应缩小以适合。即设置width不符合要求。

扩展@Kiaurutis＆＃39;回答：

img {
  max-width: 400px;
}

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

这里可以看到一个工作示例：https://jsfiddle.net/vrehxmpx/。在此示例中，图像大于400px（始终按比例缩小），图像小于阈值（仅在屏幕小于图像时按比例缩小）。

要调整图片上可能包含的边距，边框和其他内容，只需增加@media＆＃39; max-width。

Answer 5

我的网站上有相同宽度的“页面换行”。我希望它默认为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属性小于20％或100px。

img {
    max-width: 20%;
}

@media (min-width: 500px){ /* at 500 pixels, 20% of the width will be 100px */
    img {
        max-width: 100px;
    }
}

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

6 个答案: