关于阿里巴巴无线端旺铺自定义模块如何设置图片全屏自动适应的问题

2017-11-10 14:33:43  浏览：10576  作者：疯狂小编

   无线端旺铺最近已经是被阿里放到了非常重要的一个层次，各种数据（%￥……&#@……&&此处省略一万字）总之，就是很牛逼啦！

       然后呢~最近很多朋友通过微信、旺旺群问我，无线端里面的自定义页面，图片需要做多大，才能使刚刚好全屏。

现在疯狂的美工阿里巴巴无线端装修工具已经支持阿里手机店铺自由切图一图多热区的安装，点击以下链接看使用方法

阿里无线端多链接热区工具教程：http://ali.mgzxzs.com/chajian/210.html

  首先回答这个问题之前，我们要考虑一个事情就是，大家的手机屏幕不一样。我们要让大家都看到这个图片都是全屏的，那么我们就要用到一个前端技术：自适应。


       自适应，顾名思义就是，用一张图适应所有的手机，也就是说大屏手机看到的页面刚好是全屏的，小屏幕看到的页面也是刚好全屏的。用通俗的说法解释这个自适应就是这样的：做一张图适合最大的屏幕(一般以IPAD尺寸为最大的无线端尺寸)，然后加一段代码，让这个图片的尺寸等于屏幕的尺寸，那么在小屏幕上看到的页面尺寸就刚刚好等于屏幕尺寸，也就是全屏。

 

这时候会不会很多人说，瞎jb扯这么多，直接上代码不就好了嘛？

好的~重点来了！

<body style="padding:0; margin:0;">
  <div style="width:100%;max-width:900px; margin:auto;"> 

    <img style=" width:100%;margin:auto;" src="图片地址1">

    <img style=" width:100%;margin:auto;" src="图片地址2">
    <a href="链接" target="_blank"><img style=" width:100%;margin:auto;" src="图片地            3"></a> 

  </div>

</body>

注释：

1.第二行的那个900px,表示的是图片的尺寸；

2.<img style=" width:100%;margin:auto;" src="图片地址1">表示的是一张图片，把你的图片链接替换里面的中文字即可

3.<a href="链接" target="_blank"><img style=" width:100%;margin:auto;" src="图片地址2">

</a>这一行表示一张图片，并且是加了链接的

上一篇：阿里巴巴全屏CSS3缩放动态海报活动效果模块代码教程，海报png元素自动缩放动感效果

下一篇：阿里1688店铺怎么获取无线端链接地址?复制1688店铺无线端分类/详情页链接的方法

【随机内容】

返回顶部