我一直在尝试找到纯CSS解决方案,以确保横幅中的图像不会低于父元素的高度,但保持图像的比例。
您可以在此处查看演示:http://jsfiddle.net/LkxYU/1/
HTML:
<div class="banner_holder">
<img src="http://placekitten.com/g/800/600"/>
</div>
CSS:
.banner_holder{
width: 100%;
height: 300px;
min-height: 200px;
position: relative;
outline:1px dotted red;
}
.banner_holder img{
width: 100%;
}
我的目标是让图片始终保持100%的大小,但高度不低于300像素。这意味着图片会被裁剪,但没关系,我只想知道是否有纯CSS解决方案,或者我需要使用jQuery。