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中直接使用百分比设置宽度。

enter image description here 您不止一次使用相同的类。

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

请参阅下面的内容

enter image description here

Answer 2

定义可怕的？怎么了？什么移动设备？

如果您定位html元素，它应该可以很好地扩展。

html { 
  background: url(../photo.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

在移动设备上，图像很可能会被裁剪。

Answer 3

<html>
<head>
<style type="text/css">
    .first {
        width: 100%;
        height: 100%;
        background: url(9.jpg) no-repeat;
        background-size: 100%;
/*if you don't want to maintain aspect ratio of image and make it cover entire screen
 use: background-size: 100% 100%;
*/
    }  
</style>
</head>
<body>
<div class="first">
</div>
</body>
</html>

希望这会有所帮助..

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

3 个答案: