84669 orang belajar
152542 orang belajar
20005 orang belajar
5487 orang belajar
7821 orang belajar
359900 orang belajar
3350 orang belajar
180660 orang belajar
48569 orang belajar
18603 orang belajar
40936 orang belajar
1549 orang belajar
1183 orang belajar
32909 orang belajar
一张大图片,大家怎么布局啊,直接切图的方式;
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稍微小一点 }
谢邀请;给你比较讨巧的土法;一般我应付SB领导的;切图的时候这种项目,我倾向吧所有需要切的纯图页面,每个快都切成正方形;(因为我作图,所以不会出现个按钮在两个正方形之间被切碎;)1.jpg,2.jpg,3.jpg 这三是你切图的图gi1.png 这图纯透明10px*10px正方形;
说道这里你差不多该懂了;
DOM结构还是这样,不过是多了css,比如:
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'); }
这块有时候懒得可以用js一个循环下来都行;好处:1,可以不动脑;反正切图是正方形,页面图是正方形,随便拉伸都是正方形;2,懒3,更懒的方法是连DOM都是js生成的;4,一定程度防窃图;5,反正就是懒~~
由这个方法引申出来,只要前面的PNG的比例和切图的比例相同(只要比例相同,且不要大;且gif也可以设置可以文件大小可以更小),都可以保证适配所有设备且无变形!懒得写css就这么玩吧;
谢邀。用背景图。总感觉不适合。因为你是背景图的话。宽高怎么设置啊?
因为你在移动端没有设置background-size,没有做到自适应,可以使用rem
如果是要全覆盖,那就设置成cover吧:
如果是要图片扩充到适应p的尺寸:
谢邀请;
给你比较讨巧的土法;一般我应付SB领导的;
切图的时候这种项目,我倾向吧所有需要切的纯图页面,每个快都切成正方形;
(因为我作图,所以不会出现个按钮在两个正方形之间被切碎;)
1.jpg,2.jpg,3.jpg 这三是你切图的图
gi1.png 这图纯透明10px*10px正方形;
说道这里你差不多该懂了;
DOM结构还是这样,不过是多了css,比如:
这块有时候懒得可以用js一个循环下来都行;
好处:
1,可以不动脑;反正切图是正方形,页面图是正方形,随便拉伸都是正方形;
2,懒
3,更懒的方法是连DOM都是js生成的;
4,一定程度防窃图;
5,反正就是懒~~
由这个方法引申出来,只要前面的PNG的比例和切图的比例相同(只要比例相同,且不要大;且gif也可以设置可以文件大小可以更小),都可以保证适配所有设备且无变形!懒得写css就这么玩吧;
谢邀。用背景图。总感觉不适合。因为你是背景图的话。宽高怎么设置啊?