Html CSS 图像高度限制为父 div 高度。父 div 宽度和高度以百分比指定***
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22444045/
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
CSS Image height restrict to parent div height. Parent div width and height are specified in percentages***
提问by Aditya Kappagantula
How to restrict the height of an image to its parent container whose height is specified in terms of percentages?
如何将图像的高度限制到其高度以百分比指定的父容器？
I want the image to span over the parent if image width/height > parent width/height. and image to be center aligned to parent if image width/height < parent width/height. In any case I dont want the image to be stretched[vertically/horizontall.]
如果图像宽度/高度 > 父宽度/高度，我希望图像跨越父级。如果图像宽度/高度 < 父宽度/高度，则图像与父中心对齐。无论如何，我不希望图像被拉伸[垂直/水平。]
html, body{
width:100%;
height:100%;
}
#top{
height:10%;
}
#middle{
height:80%;
}
#bottom{
height:10%;
}
img{
width: how much?
height: how much?
}
<html>
<body>
<div id="top">I am top</div>
<div id="middle">
<img src="/images/abc.jpg" />
</div>
<div id="bottom">I am bottom</div>
</body>
</html>
回答by bjb568
height: 100%;
width: auto;
Just define the image height as a percentage, auto width will keep it in proportion.
只需将图像高度定义为百分比，自动宽度将保持比例。
