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

Question

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

Answer 1

雷雷

Answer 2

雷雷

Answer 3

你的意思是說你的圖片剛好是螢幕的大小？

那除非是你的圖片長寬比例和螢幕比例是一樣的，不然就要圖片變形，要嘛壓扁，要嘛變瘦，不然就是你說的情況

Answer 4

cover是鋪滿，可能圖會超出。 contain是圖完全塞入，可能會有留白。
我也遇到了這個適配需求，目前的想法是img width height100%低層級模擬背景。還沒時間試，可以先試試。

Answer 5

cover和contain都是按比例縮放的，不然就用img 100%或background-size 百分比，要做背景全螢幕比例要對

Answer 6

1. 右邊或下邊不完整，猜測background-position並沒有center；

2. cover是塞滿元素（有裁切），contain是背景最大（留黑邊），這兩個都是保持寬高比的；

3. 不要寬高比的話可以試試100% 100%，變形但是能充滿元素而且沒裁切；

4. 必要時可以調整元素尺寸，用js動態搞下就行。

Answer 7

第一種方法：透過定位把背景圖居中，再透過大小為cover調整背景大小，這樣圖片不會變形且鋪滿；

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

第二種方法：透過強制背景圖寬高為100%達到鋪滿效果，但圖片容易變形（不建議）。

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