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

Question

一张大图片，大家怎么布局啊，直接切图的方式;

<p class="bg1"></p>
<p class="bg2"></p>
<p class="bg3"></p>

PC上我是直接把图片以背景的方式加载进去;
但是在移动端我发现这样写会有问题；哪怕我使用background-size或者百分比的高度，都会产生问题；
但是使用以下方式没问题

<p class="bg1"><img src="1.jpg"></p>
<p class="bg2"><img src="2.jpg"></p>
<p class="bg3"><img src="3.jpg"></p>

真的很奇怪啊。哈哈

Answer 1

因为你在移动端没有设置background-size,没有做到自适应，可以使用rem

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

Answer 2

如果是要全覆盖，那就设置成cover吧：

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

如果是要图片扩充到适应p的尺寸：

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

Answer 3

谢邀请；
给你比较讨巧的土法；一般我应付ＳＢ领导的；
切图的时候这种项目，我倾向吧所有需要切的纯图页面，每个快都切成正方形；
（因为我作图，所以不会出现个按钮在两个正方形之间被切碎；）
1.jpg,2.jpg,3.jpg 这三是你切图的图
gi1.png　　　　　　　　　　　这图纯透明10px*10px正方形；

说道这里你差不多该懂了；

<p class="bg1"><img src="gi1.png"></p>
<p class="bg2"><img src="gi1.png"></p>
<p class="bg3"><img src="gi1.png"></p>

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 4

谢邀。用背景图。总感觉不适合。因为你是背景图的话。宽高怎么设置啊？