媒体

2018-05-24 17:42 更新

MDUI 针对图片和视频定义了一些类,可以使其具有响应式特性,和一些预定义样式。


相关资源

Material Design 图像设计规范


图片

响应式

在 img 标签上添加类 .mdui-img-fluid 可以使图片自适应它的父元素的宽度。

在线运行


圆角图片

在 img 标签上添加类 .mdui-img-rounded 使图片具有圆角。

www.mdui.org - 媒体 - 圆角图片

在线运行


圆形图片

在 img 标签上添加类 .mdui-img-circle 使图片变成圆形。

www.mdui.org - 媒体 - 圆形图片

在线运行


视频

响应式嵌入式视频

在嵌入式视频的父元素上添加类 .mdui-video-container 使视频自适应父元素的宽度。

在线运行

响应式 HTML5 视频

在 video 标签上添加类 .mdui-video-fluid 使视频自适应父元素的宽度。

在线运行


CSS 类名列表

 类名 效果
 .mdui-img-fluid 响应式图片
 .mdui-img-rounded 圆角图片
 .mdui-img-circle 圆形图片
 .mdui-video-container 响应式嵌入式视频
 .mdui-video-fluid 响应式 HTML5 视频


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号