一张图片怎么来铺满手机整个屏幕不变形???

Question

1.一张图片作背景图怎么去铺满整个屏幕,而且自适应?这样貌似不行
body{

background: url("../images/4.jpg") no-repeat top left / cover;

}

Answer 1

做不到吧，首先即便要平铺全屏，图片肯定显示不全，而且会放大失真
要做到只有设计出稿时出2倍图，比例按手机尺寸来，（职业移动端设计师都懂）否则不可能

Answer 2

图片原始的宽高比是固定的 你想要图片保持原样铺满屏幕 且不变形不可能做到的把，一般的处理方法是，选用一张变形也无所谓的背景图，然后把易变形的元素单独切出来 ，在html中重新利用img去布局 设置位置和大小，拿你这张图片举例，把纯色当做背景，把鹿和周围的元素单独切图，然后放在div的img中 调整位置

Answer 3

     .imgbox{
                 padding-top:XXX%; /*(图片高度/图片宽度)*100%*/
                 background: url("../images/4.jpg") no-repeat;
                  background-size:cover;
                  background-position:center;
            }

Answer 4

这个要看你的铺满的概念，如果想要背景图片全部显示，又铺满这显然是不现实的。

最好的方式是，PC和移动端使用不同的背景图，通过媒体查询更改背景。

另外，如果你想问，如果让背景图片铺满窗口，而不随着内容的增加拉长：

这个使用 background-attachment:fixed;来实现即可， 不过IOS会有问题，需要单独处理下：

• http://www.ptbird.cn/css-back...

        body {
            background-image:url('1.jpg');
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
        @media screen and(max-width:768px){
            body{
                background-image: url('2.jpg');
            }
        }