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

如何防止div的宽度超出百分比和像素？换句话说，浏览器应该计算百分比的像素值，然后选择两个值中较低的一个。如何设置最大宽度为百分比AND像素？

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

2015-05-28 Joe Morano

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

@ Juhana的答案是正确的路要走，但如果你真的需要最大宽度，你可以使用媒体查询 –

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

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

来源

2015-05-28 19:20:08 JJJ

+13

-1，这并不回答实际问题。我想它在OP的情况下工作，但问题是：在这个答案中_percent_中的'max-width'在哪里？相反，答案只是定义了一个“宽度”，这是不同的。 – Zelphir

@ Zelphir我不太了解你的评论; OP特别希望将宽度设置为20％或100px，以较小者为准，而这恰好就是这样。 – JJJ

这与设置两个最大值并选择最小值不同。如果内容没有填充_parent_的'20％'，您仍然会将_element_设置为'20％'宽，而这可能不是必需的或不需要的。如果你有'px'和'％'的最大宽度，你不会有这种行为。 – Zelphir

这将不是使用不同的图像大小/长宽比。如果您知道图像的大小，您可以分别定义最大宽度和最大高度。对特定的一组图像使用此方法，但不是作为一般规则。

实际示例：您的手机中有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测试。做到这一点

来源

2016-10-26 21:53:19 Kiaurutis

一种方法是简单地使用两个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>

来源

2016-12-02 20:20:03

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

要扩大@Kiaurutis的回答：

img { 
    max-width: 400px; 
} 

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

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

要调整图像边缘，边框和其他东西，只需增加@media的max-width即可。

来源

2017-07-11 17:40:11 Druckles

我在我的网站上有相同的宽度“换页”。我希望默认宽度为95％，但不超过1280像素。这是我怎么用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;}}

来源

2018-03-01 16:42:17

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

回答

相关问题