css - 全图片专题移动端布局
PHP中文网
PHP中文网 2017-04-17 14:26:40
0
4
469

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

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

真的很奇怪啊。哈哈

PHP中文网
PHP中文网

认证0级讲师

Antworte allen (4)
黄舟

因为你在移动端没有设置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就这么玩吧;

        迷茫

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

          Neueste Downloads
          Mehr>
          Web-Effekte
          Quellcode der Website
          Website-Materialien
          Frontend-Vorlage
          Über uns Haftungsausschluss Sitemap
          Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!