html - 我正在尝试制作 "jumbotron"img

Question

我正在尝试使图像在网站上 100% 拉伸(stretch)，当我缩小窗口时，图片应保持居中并从两侧收缩。这是我尝试过的:

HTML

<div class="full-width">
    <img src="img/large.jpg" alt="">
</div>

CSS

.full-width{
    width:100%;
    height:450px;
    margin-bottom:50px;
}

.full-width img {
    width:75%;
    margin:0 auto;
}

Answer 1

简单地使用 cover 作为您的 background-size 属性:

jsBin demo

.full-width{
    width:100%;
    height:450px;
    margin-bottom:50px;
    background:url(img/large.jpg) 50% / cover;
}

50% 将它居中，覆盖并用背景图片填充您的 DIV 元素。