媒体 - MDUI 开发文档, Material Design 前端框架

图片

响应式

在 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 视频

媒体

相关阅读

图片

响应式

圆角图片

圆形图片

视频

响应式嵌入式视频

响应式 HTML5 视频

CSS 类名列表