html – 使响应式图像适合父容器

我一直试图弄清楚是否有一个纯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;
}