Question

我试图让图像在网站上伸展100％，当我收缩窗口时，图片应保持居中并从侧面收缩。这是我尝试过的：

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

如果您将图像用作背景，则可以将background-size属性与整个文档中div的大小配合使用。

.full-width {
 position:fixed;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:url(img/large.jpg) no-repeat center center;
 background-size:100% auto;
}

Answer 2

您错过了display: block（margin: 0 auto仅适用于块元素）和height: auto图片：

＆＃13;

.full-width{
    width:100%;
    height:450px;
    margin-bottom:50px;
}

.full-width img {
    width:75%;
    margin:0 auto;
    height:auto;
    display:block;
}

＆＃13;

<div class="full-width">
    <img src="http://placehold.it/350x150" alt="">
</div>

＆＃13;

JSFiddle

Answer 3

仅使用cover作为background-size媒体资源：

<强> jsBin demo

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

50%会将其居中，而cover会将您的DIV元素与背景图片一起填充。

Answer 4

将 .full-width img 的宽度从75％更改为100％。

我正试图制作一个＃34; jumbotron＃34; IMG

4 个答案: