メディア

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 ビデオ

アイコン

ヘルパークラス