基於 Material Design 3 與 Web Components 的全新 mdui 2 現已發佈，前往查看 mdui 2 開發文件。

媒體

mdui 針對圖片和影片定義了一些類別，可以使其具有響應式特性和一些預設樣式。

圖片

響應式

在 img 標籤上添加類別 .mdui-img-fluid 可以使圖片自適應它的父元素的寬度。

範例

<img class="mdui-img-fluid" src="image.png" />

圓角圖片

在 img 標籤上添加類別 .mdui-img-rounded 使圖片具有圓角。

範例

<img class="mdui-img-rounded" src="image.png" />

圓形圖片

在 img 標籤上添加類別 .mdui-img-circle 使圖片變成圓形。

範例

<img class="mdui-img-circle" src="image.png" />

影片

響應式嵌入式影片

在嵌入式影片的父元素上添加類別 .mdui-video-container 使影片自適應父元素的寬度。

範例

<div class="mdui-video-container">
  <iframe
    height="498"
    width="510"
    src="https://player.youku.com/embed/XNzUwOTk5MzE2"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

響應式 HTML5 影片

在 video 標籤上添加類別 .mdui-video-fluid 使影片自適應父元素的寬度。

範例

<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 類別清單