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

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

您现在可以使用 css min。但需要注意的是，IE 不支持它。

width: min(20%, 100px)

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

Answer 4

这不适用于不同的图像尺寸/宽高比.如果您知道图像的大小,则可以分别定义最大宽度和最大高度.将此方法用于特定图像组,但不作为一般规则.

实际示例:手机中有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 5

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

扩展@Kiaurutis的回答：

img {
  max-width: 400px;
}

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

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

要调整边距，边框和你可能在图像上其他的东西，只是增加了@media的max-width。