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

Posted 2023-02-15

【中文标题】如何将最大宽度设置为百分比和像素？

【英文标题】：How to set a max-width as percent AND pixels?

【发布时间】：2015-08-11 11:09:12

【问题描述】：

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

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

【问题讨论】：

@dwreck08 我想，但如果这不能用纯 CSS 完成，我会感到惊讶。

@Juhana 的回答是正确的方法，但如果你真的需要最大宽度，你可以使用媒体查询

【参考方案1】：

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

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

【讨论】：

-1，这并不能回答实际问题。我想它在 OPs 案例中有效，但问题是：这个答案中 percent 中的max-width 在哪里？相反，答案只是定义了一个width，这是不同的。

@Zelphir 我不太明白你的评论； OP 特别想将宽度设置为 20% 或 100px，以较小者为准，这正是这样做的。

这与设置两个最大值并选择其中的最小值不同。如果内容没有填满 parent 的 20%，您仍然需要将 element 设置为 20% 宽，虽然这可能不是必需的或不想要的.如果px 和% 都有最大宽度，则不会出现这种行为。

@Zelphir 引用问题：“换句话说，浏览器应该计算百分比的像素值，然后选择两个值中的较低值。”如果父宽度为 1000px，则“百分比的像素值”为 1000px * 20% = 200px。然后“两个值中的较低值”是 200px 与 100px。 Juhana 的答案是正确的！

@Zelphir 问题很清楚，与标题不冲突，但这个答案确实不正确。实际上，OP 写道，浏览器应该选择两者中的最小值，但暗示这个值应该成为最大宽度，而不是宽度。我猜目前的方法是使用 CSS Grid 布局和minmax() 函数。

【参考方案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>

【参考方案3】：

这将不适用于不同的图像尺寸/纵横比。如果您知道图像的大小，您可以分别定义 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 上测试。

【参考方案4】：

我遇到了一个需要类似解决方案的具体问题。我需要以原始大小显示所有图像（与纵横比、位置或额外的 html 标记无关），最多以像素为单位设置最大宽度。如果屏幕小于这个固定尺寸，它应该缩小以适应。 IE。设置 width 将无法满足要求。

扩展@Kiaurutis 的回答：

img 
  max-width: 400px;


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

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

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

【参考方案5】：

您现在可以使用 css min。但是你应该注意IE不支持它。

width: min(20%, 100px)

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

【讨论】：

有关浏览器支持的更多信息，另请参阅caniuse.com/css-math-functions

【参考方案6】：

不要这样做。

我相信所选答案对于 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;
    

【参考方案7】：

我的网站上的“页面换行”宽度相同。我希望它默认为 95% 宽度，但不超过 1280 像素。这是我使用 CSS 制作的方法

.wrapmax-width:95%;margin:0px auto;
@media screen and (max-device-width:1280px),screen and (max-width:1280px).wrapmax-width:1280px;margin:0px auto;