多值的最小/最大宽度/高度

Question

2020年修改（min、max、clamp函数）

对于通过搜索引擎来到这里的任何人：

CSS的min / max / clamp 函数在近期（2020年）的浏览器中已经得到了一些支持。您可以尝试使用 max-width: min(200px, 50%);。在查看这些CSS函数时要小心兼容性问题。

---

2023年修改（容器查询）

容器查询 已经被Chrome 105，Firefox 110和iOS 16支持。

---

原始帖子：

我想限制一个 <div> 的宽度不超过 50%，并且 不超过 200px。

也就是说，当 50% 小于 200px 时，它应该与 max-width: 50% 具有相同的行为，否则它的行为将变为 max-width: 200px。

如何使用CSS定义这个问题？（不用min函数，因为它还没有被支持）

<div class="some_element">Text here</div>
<style>
.some_element {
    background: red;
    float: left;
    width: auto;
    max-width: 200px;
    max-width: 50%; /* this will override previous one, but i want both of them work */
}
</style>

- tsh

---

根据 http://caniuse.com/#feat=minmaxwh 的数据，它对于你所说的最小宽度有相当好的支持。 - Douwe de Haan

@DouwedeHaan 是的，这个功能已经存在很久了，并且得到了广泛支持。但是它只接受一个值。但我想要两个。 - tsh

Answer 1

当页面宽度小于或等于400px时，您可以将所需的规则表述为最大宽度的50％，而在页面宽度大于或等于400px时为200px。这听起来很像媒体查询！我首先处理较小的屏幕宽度，然后覆盖更大的宽度，使用的CSS代码如下：

.some_element {
  background: red;
  float: left;
  width: auto;
  max-width: 50%;
}
@media (min-width: 400px) {
  .some_element {
    max-width: 200px;
  }
}

如果您愿意，您可以交换50％和200px，并将min-width更改为max-width。

- misterhaan

Answer 2

您不能同时将max-width设置为200px和50%。您可以将该元素放置在另一个最大宽度为400px的元素中：

<div id="parent">
    <div id="child">Text here</div>
</div>


#parent {
    background-color: red;
    max-width: 400px;
}
#child {
    background-color: green;
    max-width: 50%;
}

- Andy G

---

为什么要修改？之前那个（带有“max-width: 50%”）似乎是正确的，但这个不是吗？ - tsh

好的，我已经把它放回去了，宽度对我来说似乎更正确。 - Andy G

一张图片怎么样？我相信图片不会适应父容器。 - user5306470

Answer 3

<div id="parent">
    <div id="sub">test content</div>
</div>

// css

#parent {
    max-width: 200px;
}
#sub {
    width: 50%;
}

- Ravi Chauhan

Answer 4

创建单独的类并根据outerWidth()动态添加它们。

.some_element {
        background: red;
        float: left;
        width: auto;
    }

    .widthClass1{
     max-width:50%;
    }

    .widthClass2{
     max-width:200px;
    }


    $(document).ready(function(){
       if($("textDiv").outerWidth()<400){//instead of dividing by 2 I am comparing with 400
         $("textDiv").addClass('widthClass1')
       }else{
         $("textDiv").addClass('widthClass2')
       }
    });

- Sunil B N

---

使用JavaScript将始终解决此类问题，就像旧日的max-width: expression(Math.min(this.parentNode.clientWidth / 2, 200) + 'px');（代码未经测试）一样。但是保持这些元素的classList或max-width更新似乎太复杂了。例如，当窗口大小调整时，当元素显示/隐藏时... - tsh

你可以将所有这些宽度相关的CSS属性放在一个函数中，并在window.onresize上执行。 - Sunil B N

Answer 5

您可以按照以下方式尝试

.some_element {
    background: red;
    float: left;
    width: auto;
    width: 50%; 
    max-width: 200px;        
}

- Lokesh Kumar

---

这里的"width:auto"没有任何意义。 - Sunil B N

这段代码会使元素的宽度为50%，即使其内容的宽度小于50%，这不是我想要的。 - tsh

@tsh - 那么你的问题是不正确的。因为你说你总是希望它不超过50%。你需要澄清你实际想要什么。 - carl-johan.blomqvist

@carl-johan.blomqvist 我想要 float: left; width: auto; max-width: min(200px, 50%);。这意味着宽度是 min(最佳适合宽度，200像素，其容器的50%)。 - tsh

@tsh - 我认为你没有。在容器为300px的情况下，min（200px，50％）=> min（200px，150px）=> 150px。这就是上述解决方案的结果？在500px的情况下：min（200px，50％）=> min（200px，250px）=> 200px。这也是上述解决方案的结果。我认为您需要明确您真正寻找的场景以获得更好的解决方案。 - carl-johan.blomqvist