css3 - 背景图自定义比例缩小

Question

本来新手一枚，在开发中遇到背景图不能安自定义比例缩放，用了background-size:cover，图片要么右半部分不完整，要么下半部分不完整，要怎么做才能铺满全屏并且全部显示出来

PHPz · Answer

body {
    background-size:cover;
    text-align:center;
    /*此部分支持chrome，应该也支持firefox*/
    background:rgb(246,248,249);
    background:url(../img/bg.jpg) no-repeat center fixed transparent;
    background-attachment:fixed;
    background-size:100% 100%;
    /*以下是IE部分，使用滤镜*/
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg.jpg',sizingMethod='scale');
    background-repeat:no-repeat;
    background-position:100%,100%;
}

阿神 · Answer

background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
background-image: url(./img/desk4.jpg);
background-position: 50% 50%;

ringa_lee · Answer

你的意思是你的图片正好是屏幕的大小？

那除非是你的图片长宽比例和屏幕比例是一样的，不然就要图片变形，要么压扁，要么变瘦，不然就是你说的情况

大家讲道理 · Answer

cover是铺满，可能图会超出。contain是图完全塞入，可能会有留白。
我也遇到了这个适配需求，目前的想法是img width height100%低层级模拟背景。还没时间试，你可以先试试。

怪我咯 · Answer

cover和contain都是按比例缩放的，不然就用img 100%或者background-size 百分比，要做背景全屏比例要对

怪我咯 · Answer

右边或者下边不完整，猜测background-position并没有center；
cover是塞满元素（有裁切），contain是背景最大（留黑边），这俩都是保持宽高比的；
不要宽高比的话可以试试100% 100%，变形但是能充满元素而且没裁切；
必要时可以调整元素尺寸，用js动态搞下就行。

天蓬老师 · Answer

第一种方法：通过定位把背景图居中，再通过大小为cover调整背景大小，这样图片不会变形且铺满；

p {
    background-size: cover;
    background-position: center center;
}

第二种方法：通过强制背景图宽高为100%达到铺满效果，但是图片容易变形（不推荐）。

p {
    background-size: 100% 100%;
}