使封面图像在移动设备上响应

Question

我在网站的首页上有一张封面照片，它在桌面上看起来很好，随着浏览器大小的变化，它的尺寸也在变化，但在移动设备上打开时看起来绝对可怕。

.first {
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    position:relative; 
    background: url(../photo.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}  

 @media only screen and (max-width: 320px) {
    /* Small screen, non-retina */
        .first { 
            background: url(../photo.jpg);
            width: 50%;
            height: 50%; }
    }

    @media only screen and (min-resolution: 2dppx) and (max-width: 320px) {
        /* Small screen, retina */
        .first { 
            background: url(../photo.jpg);
            width: 50%;
            height: 50%; }    
        }

Answer 1

我们在图像上有一个唯一的类，所以设置图像的绝对位置，并直接在CSS中使用百分比设置宽度。

.first {
    background: url("../lyuba_final.jpg") no-repeat fixed center center / cover rgba(0, 0, 0, 0);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

请看下面你的忏悔