我一直试图弄清楚是否有一个纯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％,但高度从不低于300px.这意味着图像截止,但没关系,我只是想知道是否有纯CSS解决方案,或者我是否需要使用jQuery
解决方法
而不是使用< img>标签,我将该图像作为div的背景图像,并给它以下样式：
.banner_holderImage{
height: 100%;
position:relative;
background: url("http://placekitten.com/g/800/600")no-repeat;
background-size: cover;
background-position: center;
}
这是我使用的小提琴：http://jsfiddle.net/MathiasaurusRex/LkxYU/4/
这是完整的HTML和CSS：
<div class="banner_holder">
<div class="banner_holderImage"></div>
</div>
–
.banner_holder{
width: 100%;
height: 300px;
min-height: 200px;
position: relative;
outline:1px dotted red;
}
.banner_holderImage{
height: 100%;
position:relative;
background: url("http://placekitten.com/g/800/600")no-repeat;
background-size: cover;
background-position: center;
}
