屏幕尺寸更改时图像无响应。

Question

我正在尝试使图像响应，但是当我使用不同的屏幕尺寸进行测试时，它会切断部分图像。我的CSS非常简单，如下所示。这是我的codepen

.mainImage {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    background-attachment: fixed;
    width: 100%;
    min-width: 100%;
    margin-right: 0;
    margin-left: 0;
    height: 600px;
    margin-top: -85px;
    background:url(https://s-media-cache-ak0.pinimg.com/originals/12/5d/ba/125dba934726c247106978c7b9cdb452.jpg)
}

我错过了什么或可能做错了什么？

Answer 1

您正在设置所有＆＃34;背景 - ＆＃34;首先是零件，然后定义＆＃34;背景＆＃34;用速记来覆盖。更改订单......

.mainImage {
position: relative;
background:url(https://s-media-cache-ak0.pinimg.com/originals/12/5d/ba/125dba934726c247106978c7b9cdb452.jpg)
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
background-attachment: fixed;
width: 100%;
min-width: 100%;
margin-right: 0;
margin-left: 0;
height: 600px;
margin-top: -85px;
}

或者不要使用速记......

background-image: url(https://s-media-cache-ak0.pinimg.com/originals/12/5d/ba/125dba934726c247106978c7b9cdb452.jpg)

Answer 2

您也可以使用background-size: contain代替封面来强制图像完全显示。

cover将完全填满整个背景。

contain将确保整个图像显示在元素

中

您还需要在主背景样式之后应用这些背景样式属性。

所以：

.mainImage {
    position: relative;
    width: 100%;
    min-width: 100%;
    margin-right: 0;
    margin-left: 0;
    height: 600px;
    margin-top: -85px;
    background:url(https://s-media-cache-ak0.pinimg.com/originals/12/5d/ba/125dba934726c247106978c7b9cdb452.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    background-attachment: fixed;
}

Answer 3

尝试添加：

background-size: 100% 100%;