Zcela nové mdui 2 založené na Material Design 3 a Web Components bylo vydáno, přejděte na dokumentaci mdui 2.

Média

mdui definuje některé třídy pro obrázky a videa, aby měly responzivní vlastnosti a některé předdefinované styly.

Související čtení

Designové zásady Material Design: Styl - Obrázek

Obrázek

Responzivní

Přidáním třídy .mdui-img-fluid na značku img se obrázek přizpůsobí šířce svého nadřazeného prvku.

Příklad

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

Obrázek se zaoblenými rohy

Přidáním třídy .mdui-img-rounded na značku img bude mít obrázek zaoblené rohy.

Příklad

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

Kruhový obrázek

Přidáním třídy .mdui-img-circle na značku img se obrázek změní na kruh.

Příklad

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

Video

Responzivní vložené video

Přidáním třídy .mdui-video-container na nadřazený prvek vloženého videa se video přizpůsobí šířce nadřazeného prvku.

Příklad

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

Responzivní video HTML5

Přidáním třídy .mdui-video-fluid na značku video se video přizpůsobí šířce nadřazeného prvku.

Příklad

<video class="mdui-video-fluid" controls>
  <source src="video.mp4" type="video/mp4" /></video
>

Seznam CSS tříd

Název třídy	Popis
`.mdui-img-fluid`	Responzivní obrázek
`.mdui-img-rounded`	Obrázek se zaoblenými rohy
`.mdui-img-circle`	Kruhový obrázek
`.mdui-video-container`	Responzivní vložené video
`.mdui-video-fluid`	Responzivní video HTML5

Ikony

Pomocné třídy