Html 如何将最大宽度设置为百分比和像素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30515087/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set a max-width as percent AND pixels?
提问by Joe Morano
How can I prevent the width of a div from expanding beyond a percent AND a pixel? In other words, the browser should calculate the pixel value of the percent, and then choose the lower of the two values.
如何防止 div 的宽度扩展超过百分比和像素？换句话说，浏览器应该计算百分比的像素值，然后选择两个值中较低的一个。
If I were to set them both like this: {max-width:100px;max-width:20%;}the asset pipeline would simply choose the second one and ignore the first one.
如果我将它们都设置为这样：{max-width:100px;max-width:20%;}资产管道将简单地选择第二个并忽略第一个。
采纳答案by JJJ
width:20%;
max-width:100px;
This sets the width to 20% but caps it at 100 px.
这会将宽度设置为 20%，但将其上限设置为 100 像素。
回答by Jason Axelson
One way to accomplish this is to simply use two divs
实现此目的的一种方法是简单地使用两个 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>
回答by Kiaurutis
This will NOTwork with different image sizes/aspect ratios. You can define max-widthand max-heightseparately, if you know the sizes of images. Use this method for a specific group of images, but not as a general rule.
这不适用于不同的图像尺寸/纵横比。如果您知道图像的大小，您可以分别定义max-width和max-height。将此方法用于特定的图像组，但不是一般规则。
Practical example: You have 5 photos from your phone to be placed in a page and you need some text to be in the other half of screen. You reduce the size of images to 500px wide and 300px high. You want them not to exceed half the screen and not be wider than 250px on tablet. Calculate the max height: 250*300/500=150px.
实际示例：您将手机中的 5 张照片放置在一个页面中，并且您需要在屏幕的另一半显示一些文字。您将图像的大小减小到 500 像素宽和 300 像素高。您希望它们不超过屏幕的一半，并且在平板电脑上不超过 250 像素。计算最大高度：250*300/500=150px。
.img-class {
max-width: 50%;
}
@media (max-width: 800px) {
.img-class {
max-height: 150px;
}
}
Tested on latest Chrome, Firefox and IE.
在最新的 Chrome、Firefox 和 IE 上测试。
回答by Druckles
I had a specific problem which required a similar solution. I needed to display all images (independent of aspect-ratio, position or extra HTML markup) at their original size, up to a set maximum width in pixels. If the screen is smaller than this fixed size, it should shrink to fit. I.e. setting a widthwould not satisfy the requirements.
我有一个需要类似解决方案的特定问题。我需要以原始大小显示所有图像（独立于纵横比、位置或额外的 HTML 标记），以像素为单位设置最大宽度。如果屏幕小于这个固定尺寸，它应该缩小以适应。即设置 awidth不能满足要求。
To expand on @Kiaurutis' answer:
扩展@Kiaurutis的回答：
img {
max-width: 400px;
}
@media (max-width: 400px) {
img {
max-width: 100%;
}
}
A working example can be seen here: https://jsfiddle.net/vrehxmpx/. In this example there is an image greater than 400px (always scaled down) and an image smaller than the threshold (only scaled down when the screen is smaller than the image).
可以在这里看到一个工作示例：https: //jsfiddle.net/vrehxmpx/。在这个例子中，有一个大于 400px 的图像（总是缩小）和一个小于阈值的图像（只有当屏幕小于图像时才缩小）。
To adjust for margins, borders and other stuff you might have on the image, just increase the @media's max-width.
要调整边距，边框和你可能在图像上其他的东西，只是增加了@media的max-width。
回答by Aaron Cicali
Don't do this.
不要这样做。
I believe the selected answer is correct for the scenario that the OP describes. However, some of the comments argue that the OP has asked to set the max-widthproperty to the lower of the two values, not the width. This also can be done, please see below.
我相信所选答案对于 OP 描述的场景是正确的。但是，一些评论认为 OP 已要求将该max-width属性设置为两个值中较低的一个，而不是width. 这也可以做到，请参阅下文。
Note:This solution does not make a lot of sense to me. Please use the selected answer, it correctly demonstrates what max-width was made for. The code below will ensure that the max-widthproperty is the lesser of 20% or 100px.
注意：这个解决方案对我来说没有多大意义。请使用选定的答案，它正确地展示了 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;
}
}
回答by Ph Abd
I had the same width "page wrap" on my site. I wanted it to be 95% width by default but not more than 1280px. here is how I made it with CSS
我的网站上有相同宽度的“页面换行”。我希望它默认为 95% 宽度但不超过 1280px。这是我用 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;}}
