Css 具有多个值的最小/最大宽度/高度 2020年编辑（最小、最大、夹紧功能）

对于通过搜索引擎到达此处的任何人：

CSS//函数在最近（2020年）的浏览器中得到了一些支持。您可以尝试

max-width:min（200px，50%）。您可以查看这些CSS函数，同时注意兼容性问题


原职：

我想限制
的宽度不超过
50%
，并且不超过
200px

这意味着，当
50%
小于
200px
时，其行为应与
max width:50%
相同，否则其行为将变为
max width:200px

我如何用CSS定义它？

（没有，尚未得到支持）

这里的文本
.一些元素{
背景：红色；
浮动：左；
宽度：自动；
最大宽度：200px；
最大宽度：50%；/*这将覆盖上一个，但我希望它们都能工作*/
}
您可以尝试下面提到的方法

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

不能将“最大宽度”同时设置为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%;
}


此处文本
#母公司{
背景色：红色；
最大宽度：400px；
}
#孩子{
背景颜色：绿色；
最大宽度：50%；
}
创建单独的类，并根据outerWidth（）动态添加它们

。一些元素{
背景：红色；
浮动：左；
宽度：自动；
}
.1级{
最大宽度：50%；
}
.2级{
最大宽度：200px；
}
$（文档）.ready（函数（）{
如果（$（（“textDiv”）.outerWidth（）当页面宽度小于或等于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
，因为它有一些非常好的支持（您所说的最小宽度）@DouwedeHaan是的，这个功能已经足够老了，并且得到了广泛的支持。但是它只接受一个值。但是我想要两个。宽度：auto在这里没有意义。这个代码使元素具有
宽度：50%
，即使它的内容的宽度小于
50%
，这不是我想要的。@tsh-那么你的问题是不正确的。因为你声明了你总是希望它是“不超过50%”。你需要澄清你真正想要的。@carl-johan.blomqvist我想要
float:left；width:auto；max width:min（200px，50%）；
。这意味着宽度是最小的（它最适合的宽度，200px，它容器的50%）。@tsh-我想你不需要。在容器是300px的情况下，最小（200px，50%）=>min（200px，150px）=>150px。这就是上面的解决方案所发生的情况？在500px的场景中：min（200px，50%）=>min（200px，250px）=>200px。这也是上面的解决方案所发生的情况。你需要指定我认为你真正想要更好的场景。为什么要编辑？上一个场景（使用
最大宽度：50%
）似乎正确，但不是这个？我把它放回去了，宽度对我来说似乎更正确；）图像呢？我相信图像不适合父对象。使用javascript总是可以解决这些问题，就像
max width:expression（Math.min（this.parentNode.clientWidth/2200）+“px”）；
（代码未测试）在过去。但是不断更新这些元素的
类列表
或
最大宽度
似乎太复杂了。例如，当窗口大小调整时，当元素显示/隐藏时……您可以在一个函数中保留所有这些面向宽度的css，也可以在window.onresize上执行
.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')
       }
    });

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

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

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