Медиа

mdui определяет несколько классов для изображений и видео, придавая им адаптивность и предопределенные стили.

Связанное чтение

Изображения

Адаптивность

Добавление класса .mdui-img-fluid к тегу img позволяет изображению адаптироваться к ширине родительского элемента.

Пример

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

Изображение с закругленными углами

Добавление класса .mdui-img-rounded к тегу img делает углы изображения закругленными.

Пример

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

Круглое изображение

Добавление класса .mdui-img-circle к тегу img делает изображение круглым.

Пример

<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-видео

Добавление класса .mdui-video-fluid к тегу video позволяет видео адаптироваться к ширине родительского элемента.

Пример

<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-видео

Иконки

Вспомогательные классы