codecamp

媒体

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，免费阅读超1000+编程语言教程

取消

确定

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }