CSS图片高度限制为父级高度。父div的宽度和高度用百分比表示*** [英] CSS Image height restrict to parent div height. Parent div width and height are specified in percentages***
本文介绍了CSS图片高度限制为父级高度。父div的宽度和高度用百分比表示***的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何将图像的高度限制为其高度由百分比指定的父容器？
How to restrict the height of an image to its parent container whose height is specified in terms of percentages?
我希望图像跨越父图像宽度/高度>父宽度/高度。如果图像宽度/高度在任何情况下，我都不希望图像被拉伸[vertical / horizontall。]
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>
推荐答案
height: 100%;
width: auto;
只需将图片高度定义为百分比，自动宽度将保持其比例。
Just define the image height as a percentage, auto width will keep it in proportion.
这篇关于CSS图片高度限制为父级高度。父div的宽度和高度用百分比表示***的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
