响应式
在 img 标签上添加类 .mdui-img-fluid 可以使图片自适应它的父元素的宽度。
Example
<img class="mdui-img-fluid" src="image.png"/>
圆角图片
在 img 标签上添加类 .mdui-img-rounded 使图片具有圆角。
Example
<img class="mdui-img-rounded" src="image.png"/>
圆形图片
在 img 标签上添加类 .mdui-img-circle 使图片变成圆形。
Example
<img class="mdui-img-circle" src="image.png"/>
视频
响应式嵌入式视频
在嵌入式视频的父元素上添加类 .mdui-video-container 使视频自适应父元素的宽度。
Example
<div class="mdui-video-container">
<iframe height=498 width=510 src="//player.youku.com/embed/XNzUwOTk5MzE2" frameborder=0 allowfullscreen></iframe>
</div>
响应式 HTML5 视频
在 video 标签上添加类 .mdui-video-fluid 使视频自适应父元素的宽度。
Example
<video class="mdui-video-fluid" controls>
<source src="video.mp4" type="video/mp4">
</video>
CSS 类名列表
| 类名 |
效果 |
.mdui-img-fluid |
响应式图片 |
.mdui-img-rounded |
圆角图片 |
.mdui-img-circle |
圆形图片 |
.mdui-video-container |
响应式嵌入式视频 |
.mdui-video-fluid |
响应式 HTML5 视频 |