html让图片平铺父容器,html – 使响应式图像适合父容器

而不是使用< img>标签,我将该图像作为div的背景图像,并给它以下样式：

.banner_holderImage{

height: 100%;

position:relative;

background: url("http://placekitten.com/g/800/600")no-repeat;

background-size: cover;

background-position: center;

}

这是完整的HTML和CSS：

–

.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;

}