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

Because you did not set the background-size on the mobile terminal and did not achieve adaptive, you can use rem

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

Answer 2

If you want full coverage, set it to cover:

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

If you want to expand the image to fit the size of p:

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

Answer 3

Thank you for the invitation;
I’ll give you a trickier method; I usually deal with SB leaders;
When cutting images for this kind of project, I tend to cut all the pure image pages that need to be cut, and I’ll do it every time Cut into squares;
(Because I drew the picture, there will be no button cut between the two squares;)
1.jpg, 2.jpg, 3.jpg These three are your cut pictures The picture
gi1.png　　　　　This picture is purely transparent and 10px*10px square;

You should almost understand this;

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

The DOM structure is still the same, but there are more csｓ, such as:

　　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');
    }

Sometimes if you are too lazy to do this, you can use ｊｓ to loop through it;
Benefits:
1, you can use your brain; anyway, the cut image is a square, the page image is a square, and it can be stretched no matter how you want it;
2, lazy
3, the even lazier method is that even the DOM is generated by js;
4, to prevent image theft to a certain extent;
5, it’s just lazy anyway~~

Extended from this method, as long as the proportion of the previous PNG is the same as the proportion of the cut picture (as long as the proportion is the same and not too large; and the gif can also be set and the file size can be smaller), it can be guaranteed to adapt to all devices And no deformation! If you are too lazy to write css, just play like this;

Answer 4

Thank you for the invitation. Use background image. It always feels inappropriate. Because you are the background image. How to set width and height?