css - 全图片专题移动端布局

Question

一张大图片，大家怎么布局啊，直接切图的方式; {代码...} PC上我是直接把图片以背景的方式加载进去;但是在移动端我发现这样写会有问题；哪怕我使用background-size或者百分比的高度，都会产生问题；但是使用以下...

黄舟 · Answer

因為你在行動端沒有設定background-size,沒有做到自適應，可以使用rem

background : color url position no-repeat ;
background-size : x rem y rem;

迷茫 · Answer

如果是要全覆蓋，那就設定成cover吧：

{
    background-size: cover;//这样就能让背景图全覆盖你的p了，不过如果图片和p比例不同的话，图片的某些部分会溢出而不可见
}

如果是要圖片擴充到適應p的尺寸：

{
    background-size: contain;//这样北京会在保证显示完全的情况下最大限度的拉伸，如果图片与p尺寸不一样，图片就会比p稍微小一点
}

伊谢尔伦 · Answer

謝邀請；
給你比較討巧的土法；一般我應付ＳＢ領導的；
切圖的時候這種項目，我傾向吧所有需要切的純圖頁面，每個快都切成正方形；
（因為我作圖，所以不會出現個按鈕在兩個正方形之間被切碎；）
1.jpg,2.jpg,3.jpg 這三是你切圖的圖
gi1.png　　　　　　　　　　　這圖純透明10px*10px正方形；

說這裡你差不多該懂了；

DOM結構還是這樣，不過是多了ｃｓｓ，例如：

　　img{
        display:block;
        width:100%;
        height:auto;
    }
    .bg1 img{
        background:url('./1.jpg');
    }
    .bg2 img{
        background:url('./2.jpg');
    }
    .bg3 img{
        background:url('./3.jpg');
    }

這塊有時候懶得可以用ｊｓ一個循環下來都行；
好處：
１，可以不動腦；反正切圖是正方形，頁面圖是正方形，隨便拉伸都是正方形；
２，懶
３，更懶的方法是連ＤＯＭ都是ｊｓ生成的；
４，一定程度防竊圖；
５，反正就是懶～

由這個方法引申出來，只要前面的ＰＮＧ的比例和切圖的比例相同（只要比例相同，且不要大；且ＰＮＧ的比例和切圖的比例相同（只要比例相同，且不要大；且ｇｉｆ也可以設定可以檔案大小可以更小），都可以保證適配所有設備且無變形！懶得寫ｃｓｓ就這樣玩吧；

迷茫 · Answer

謝邀。用背景圖。總覺得不適合。因為你是背景圖的話。寬高怎麼設定啊？