使用 css 限制响应式图像的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13632985/
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
Limit the height of a responsive image with css
提问by RobW
My end goal is to have a fluid <img>that won't expand past an explicitly set height of a parent/grandparent element using only css.
我的最终目标是让流体<img>不会扩展到仅使用 css 的父/祖父元素的明确设置的高度。
Currently I'm doing this with a normal (max-width:100; height:auto;) fluid image and javascript by reading the height/width attributes from the img tag, calculating the aspect ratio, calculating the correct width of the image at the desired height restriction, and applying that width as a max-widthon the image's container element. Pretty simple, but I'd love to be able to do it without javascript.
目前，我正在使用普通 ( max-width:100; height:auto;) 流体图像和 javascript执行此操作，方法是从 img 标签读取高度/宽度属性，计算纵横比，计算所需高度限制下图像的正确宽度，并将该宽度应用为一个max-width图像的容器元件上。非常简单，但我希望能够在没有 javascript 的情况下做到这一点。
height:100%; width:auto;doesn't work the same as its transverse, and I've made some attempts with Unc Dave's ol' padded box and absolute positioning that function but require knowing the aspect ratio of the image beforehand and therefore cannot be applied across images that have different proportions. So the final requirement is the css must be proportion agnostic.
height:100%; width:auto;与横向的工作方式不同，我已经尝试使用 Unc Dave 的 ol' 填充框和绝对定位该功能，但需要事先知道图像的纵横比，因此不能应用于具有不同比例的图像. 所以最后的要求是 css 必须是比例不可知的。
I know, I know, the answer to this question is probably sitting next to the unicorn farm, but I thought I'd throw it out there anyways.
我知道，我知道，这个问题的答案可能就在独角兽农场旁边，但我想无论如何我都会把它扔在那里。
回答by KatieK
The trick is to add both max-height: 100%;and max-width: 100%;to .container img. Example CSS:
诀窍是将max-height: 100%;和添加max-width: 100%;到.container img。示例 CSS：
.container {
width: 300px;
border: dashed blue 1px;
}
.container img {
max-height: 100%;
max-width: 100%;
}
In this way, you can vary the specified width of .containerin whatever way you want (200px or 10% for example), and the image will be no larger than its natural dimensions. (You could specify pixels instead of 100% if you didn't want to rely on the natural size of the image.)
通过这种方式，您可以.container随心所欲地改变指定的宽度（例如 200px 或 10%），并且图像不会大于其自然尺寸。（如果您不想依赖图像的自然大小，您可以指定像素而不是 100%。）
Here's the whole fiddle: http://jsfiddle.net/KatieK/Su28P/1/
这是整个小提琴：http: //jsfiddle.net/KatieK/Su28P/1/
回答by JerryGoyal
I set the below 3 styles to my imgtag
我将以下 3 种样式设置为我的img标签
max-height: 500px;
height: 70%;
width: auto;
What it does that for desktop screen img doesn't grow beyond 500pxbut for small mobile screens, it will shrink to 70% of the outer container. Works like a charm.
它对桌面屏幕的作用 img 不会增长，500px但对于小型移动屏幕，它将缩小到外部容器的 70%。奇迹般有效。
It also works widthproperty.
它也适用于width财产。
回答by William
You can use inline styling to limit the height:
您可以使用内联样式来限制高度：
<img src="" class="img-responsive" alt="" style="max-height: 400px;">
