Nowy mdui 2 oparty na Material Design 3 i Web Components jest już dostępny, przejdź do dokumentacji mdui 2.

Media

mdui definiuje kilka klas dla obrazów i filmów, które mogą nadać im cechy responsywne i wstępnie zdefiniowane style.

Powiązane artykuły

Wytyczne projektowe Material Design: Style - Obrazy

Obraz

Responsywność

Dodanie klasy .mdui-img-fluid do tagu img sprawi, że obraz dostosuje się do szerokości elementu nadrzędnego.

Przykład

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

Obraz z zaokrąglonymi rogami

Dodanie klasy .mdui-img-rounded do tagu img nada obrazowi zaokrąglone rogi.

Przykład

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

Okrągły obraz

Dodanie klasy .mdui-img-circle do tagu img sprawi, że obraz stanie się okrągły.

Przykład

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

Wideo

Responsywne wideo osadzone

Dodanie klasy .mdui-video-container do elementu nadrzędnego osadzonego wideo sprawi, że wideo dostosuje się do szerokości tego elementu.

Przykład

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

Responsywne wideo HTML5

Dodanie klasy .mdui-video-fluid do tagu video sprawi, że wideo dostosuje się do szerokości elementu nadrzędnego.

Przykład

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

Lista klas CSS

Nazwa klasy	Opis
`.mdui-img-fluid`	Responsywny obraz
`.mdui-img-rounded`	Obraz z zaokrąglonymi rogami
`.mdui-img-circle`	Okrągły obraz
`.mdui-video-container`	Responsywne wideo osadzone
`.mdui-video-fluid`	Responsywne wideo HTML5

Ikony

Klasy pomocnicze