84669인 학습
152542인 학습
20005인 학습
5487인 학습
7821인 학습
359900인 학습
3350인 학습
180660인 학습
48569인 학습
18603인 학습
40936인 학습
1549인 학습
1183인 학습
32909인 학습
一张大图片，大家怎么布局啊，直接切图的方式;
PC上我是直接把图片以背景的方式加载进去;但是在移动端我发现这样写会有问题；哪怕我使用background-size或者百分比的高度，都会产生问题；但是使用以下方式没问题
真的很奇怪啊。哈哈
认证0级讲师
因为你在移动端没有设置background-size,没有做到自适应，可以使用rem
background : color url position no-repeat ; background-size : x rem y rem;
如果是要全覆盖，那就设置成cover吧：
{ background-size: cover;//这样就能让背景图全覆盖你的p了，不过如果图片和p比例不同的话，图片的某些部分会溢出而不可见 }
如果是要图片扩充到适应p的尺寸：
{ background-size: contain;//这样北京会在保证显示完全的情况下最大限度的拉伸，如果图片与p尺寸不一样，图片就会比p稍微小一点 }
谢邀请；给你比较讨巧的土法；一般我应付ＳＢ领导的；切图的时候这种项目，我倾向吧所有需要切的纯图页面，每个快都切成正方形；（因为我作图，所以不会出现个按钮在两个正方形之间被切碎；）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'); }
这块有时候懒得可以用ｊｓ一个循环下来都行；好处：１，可以不动脑；反正切图是正方形，页面图是正方形，随便拉伸都是正方形；２，懒３，更懒的方法是连ＤＯＭ都是ｊｓ生成的；４，一定程度防窃图；５，反正就是懒～～
由这个方法引申出来，只要前面的ＰＮＧ的比例和切图的比例相同（只要比例相同，且不要大；且ｇｉｆ也可以设置可以文件大小可以更小），都可以保证适配所有设备且无变形！懒得写ｃｓｓ就这么玩吧；
谢邀。用背景图。总感觉不适合。因为你是背景图的话。宽高怎么设置啊？
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
因为你在移动端没有设置background-size,没有做到自适应，可以使用rem
如果是要全覆盖，那就设置成cover吧：
如果是要图片扩充到适应p的尺寸：
谢邀请；
给你比较讨巧的土法；一般我应付ＳＢ领导的；
切图的时候这种项目，我倾向吧所有需要切的纯图页面，每个快都切成正方形；
（因为我作图，所以不会出现个按钮在两个正方形之间被切碎；）
1.jpg,2.jpg,3.jpg 这三是你切图的图
gi1.png 这图纯透明10px*10px正方形；
说道这里你差不多该懂了；
DOM结构还是这样，不过是多了ｃｓｓ，比如：
这块有时候懒得可以用ｊｓ一个循环下来都行；
好处：
１，可以不动脑；反正切图是正方形，页面图是正方形，随便拉伸都是正方形；
２，懒
３，更懒的方法是连ＤＯＭ都是ｊｓ生成的；
４，一定程度防窃图；
５，反正就是懒～～
由这个方法引申出来，只要前面的ＰＮＧ的比例和切图的比例相同（只要比例相同，且不要大；且ｇｉｆ也可以设置可以文件大小可以更小），都可以保证适配所有设备且无变形！懒得写ｃｓｓ就这么玩吧；
谢邀。用背景图。总感觉不适合。因为你是背景图的话。宽高怎么设置啊？