百度mip-img 图片详解

百度mip-img 图片详解,我们先来看下完整的标签

<mip-img 
    layout="responsive" 
    width="350" 
    height="263"
    popup 
    alt="www.xhcss.com" 
    src="/st/images/logo-b.png">
</mip-img>
<p class="mip-img-subtitle">带图片标题的类型</p>

注意这是一个闭合标签

layout

layout为布局属性,默认为responsive,可选参数

responsive 能够根据width、height的值,算出元素对应的比例,在不同屏幕宽度上做自适应,非常适合图片、视频等需要大小自适应的组件

fixed-height 元素的高度固定,width缺省或者取值为auto,比较适合 mip-carousel

fill 元素的大小根据父节点的大小自动撑开

container  元素的大小由他们的子节点大小决定,类似 html 的 div

nodisplay 元素不展现,即 display 为 none;这种元素可应用于:他自身展现依赖用户的点击等行为的触发

fixed 元素根据 width 和 height 固定高宽,不随 media 变化

flex-item 元素通过 flex 进行布局,需设置父元素为display:flex


popup

图片是否可以点击查看,不要就不填

其他不多说了,不懂得可以查看网站建站教程



写的好!

微信扫一扫赏大洋
相关文档