仅使用 CSS 的最大高度和最大宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14350278/
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
max-height AND max-width with CSS only
提问by Andy Blanc
First post for me here.
我在这里的第一篇文章。
I'm using a div to crop thumbnail images all in the same proportions (180wx170h). I'm getting stuck when dealing with portrait as well as landscape images. If am using this which is fine for portrait style images:
我正在使用 div 以相同的比例（180wx170h）裁剪缩略图。在处理肖像和风景图像时，我陷入了困境。如果我使用这个对肖像风格的图像很好：
.crop img {max-height:170px; width:auto}
.. and is fine for landscape style images:
.. 并且适用于风景风格的图像：
.crop img {max-width:180px; height: auto;} is fine for landscape style images.
So I basically want to crop the sides if landscape and top/bottom if portrait. Kind of like a prioritized max-height and max-width.
所以我基本上想裁剪侧面（如果是横向）和顶部/底部（如果是纵向）。有点像优先级最大高度和最大宽度。
I know this could be done easily with PHP but I really only know CSS so that would be my first preference.
我知道这可以用 PHP 轻松完成，但我真的只知道 CSS，所以这将是我的首选。
I need to maintain the aspect ratio of the image.
我需要保持图像的纵横比。
采纳答案by antejan
Edit 2019:
2019年编辑：
If you want to keep <img>tags, please look into object-fitcss property, support of it across browsers is quite good.
如果你想保留<img>标签，请查看object-fitcss 属性，它对跨浏览器的支持非常好。
And if you want to keep aspect ratio on width change, try padding-hack.
如果您想在宽度变化时保持纵横比，请尝试padding-hack。
As I understand you have blocks 180x170 px and you want to fill them completely with images. Try to move images to background and use background-size:cover.
据我了解，您有 180x170 像素的块，并且您想用图像完全填充它们。尝试将图像移动到背景并使用background-size:cover.
Demo http://jsfiddle.net/heuku/1/
演示http://jsfiddle.net/heuku/1/
<div style="background-image:url(http://placekitten.com/100/200)"></div>
<div style="background-image:url(http://placekitten.com/200/100)"></div>
<div style="background-image:url(http://placekitten.com/200/200)"></div>
div {
width:180px;
height:170px;
background-repeat:no-repeat;
background-size:cover;
}
Note that this solution not working in IE8 and below.
请注意，此解决方案不适用于 IE8 及以下版本。
回答by Nick
the solutions after going through loads of other 'solutions'
经过大量其他“解决方案”后的解决方案
max-width:100%;
max-height:100%;
height: auto;
width:auto;
回答by actimel
Edit:I have improved the solution, see here: https://stackoverflow.com/a/34774905/1663572
编辑：我改进了解决方案，请参见此处：https: //stackoverflow.com/a/34774905/1663572
I'm using this solution, which i found, when I was trying to fit and center images into squares (or whatever). It is brilliant in combination, where you set padding-bottom and height 0 to its container - that makes it responsive with fixed ratio.
我正在使用这个我发现的解决方案，当我试图将图像放入正方形（或其他任何东西）并将其居中时。它的组合非常出色，您可以将 padding-bottom 和 height 0 设置为其容器 - 这使其具有固定比例的响应。
Works in IE9 and higher. For IE8 and below some CSS hacks needed.
适用于 IE9 及更高版本。对于 IE8 及以下需要一些 CSS 技巧。
HTML
HTML
.container {
height: 0;
padding-bottom: 100%; /* Or 75% for 4:3 aspect ratio */
position: relative;
overflow: hidden;
}
.container img {
display: inline-block;
max-width: 90%; /* You can use different numbers for max-width and max-height! */
max-height: 75%;
width: auto;
height: auto;
position: absolute;
left: 50%; /* This sets left top corner of the image to the center of the block... */
top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
-webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
/* Fallback for IE8 */
@media all.crop img {max-height:170px; max-width:180px;}
{
.container img {
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
}
Try it here: http://jsfiddle.net/thiemeljiri/uhdm4fce/4/
在这里试试：http: //jsfiddle.net/thiemeljiri/uhdm4fce/4/
Notice:If using bootstrap change the class .container to something else.
注意：如果使用引导程序将类 .container 更改为其他内容。
回答by ameed
You could try
你可以试试
.crop img {max-height: 170px; max-width: 180px;}
Since max-heightand max-widthare maxima,it should work. The browser will make the image as big as possible, without going over your dimensions.
由于max-height和max-width是最大值，它应该可以工作。浏览器将使图像尽可能大，而不会超过您的尺寸。
Note that this is untested, but based on this W3Schools page.
请注意，这是未经测试的，但基于此 W3Schools 页面。
Hope this helps!!
希望这可以帮助！！
回答by Praveen Kumar Purushothaman
You have the answer in you!
你心里有答案！
Try:
尝试：
##代码##回答by YS Chung
This might be a bit late, but I found wrapping the said image in <figure>scales the image keeping the aspect ratio.
这可能有点晚了，但我发现在<figure>保持纵横比的情况下将所述图像按比例包装。
