智能小程序里面的图片显示,使用的是image标签。这个image标签和传统的img标签,可是不一样的。基本上来说,这个image标签是复杂的多。那么,这个智能小程序的image标签如何使用呢?苏南大叔先默默表示:挺复杂的。

苏南大叔:百度智能小程序,如何理解图片image的缩放及裁剪模式? - smartapp-image
百度智能小程序,如何理解图片image的缩放及裁剪模式?(图15-1)

本文测试环境:mac/百度开发者工具@2.4.3

基本描述

基本使用方式范例(注意替换<mode>字样):

<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="<mode>" src="<src>"></image>

这里先说一下苏南大叔对image标签的理解,就是div+img的组合。这个imgdiv中的位置,就造成了本文中的主要描述模式modeN种组合。不过,这个是苏南大叔自己的理解,并没有官方这种定论。

在上边的css定义种,大家可以看到居然给image定义了一个背景色。那么如果把image想象成一个包着imgdiv的话,这个image标签就比较号理解了。

image标签默认宽度是:300px,高度是225px。本文主要描述点是mode属性,当然还有其他的属性:lazy-loadbinderrorbindload,这些其他的属性并不是本文的讨论范畴。

百度智能小程序,官方image的相关文档:

注意事项

需要特别注意的是:在.css文件里面,描述image这个元素的时候,注意使用image标签,而不是img标签。大家写img写习惯了,可能会不能适应image标签。大家可以对比查看下面的代码:

img{
  width:100%;
}
image{
  width:50%;
}

总结

正常情况下来说,一般来说,只需要四种缩放模式来处理图片。而九种图片裁剪模式,虽然看起来很厉害的样子,但是苏南大叔感觉可能没有什么实际用途。

对于图片加载来说,大家可能期待的mode,苏南大叔认为:大概率是widthFix。因为只有这个mode,是最符合大家期待的,能够展示图片的全貌,并且不变形,无多余的空白。

更多智能小程序文章,请点击苏南大叔的博客:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   百度    smartapp

本站的忠实读者小伙伴,正在阅读下面这些文章: