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

【问题标题】：Image not responsive when screen size changes.屏幕尺寸更改时图像无响应。
【发布时间】：2017-09-07 15:49:20
【问题描述】：

我正在尝试使图像具有响应性，但是当我使用不同的屏幕尺寸对其进行测试时，它会切断图像的一部分。我的 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)
}

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

【问题讨论】：

图像的哪些部分被切掉但需要留在里面？您也可以使用background-size: contain 强制图像完全显示
是this你想要达到的目标吗？
@KeesvanLierop 更多的右侧，但他们都切断了
@Nofel 查看我的更新答案

标签： html css

【解决方案1】：

您首先设置所有“背景-”部分，然后以简写形式定义“背景”，即覆盖。更改顺序...

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

尝试添加这个：

background-size: 100% 100%;

【讨论】：

可能background-size:100vw;