El nuevo mdui 2 basado en Material Design 3 y Web Components ya está disponible. Consulta la documentación de mdui 2 ahora.

Media

mdui define algunas clases para imágenes y vídeos para que tengan un comportamiento responsive y algunos estilos predefinidos.

Lectura relacionada

Pautas de diseño de Material Design: Estilo - Imagen

Imagen

Responsive

Añadir la clase .mdui-img-fluid al elemento img para que la imagen se adapte al ancho de su contenedor.

Ejemplo

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

Imagen redondeada

Añadir la clase .mdui-img-rounded al elemento img para que la imagen tenga esquinas redondeadas.

Ejemplo

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

Imagen circular

Añadir la clase .mdui-img-circle al elemento img para que la imagen se convierta en un círculo.

Ejemplo

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

Vídeo

Vídeo incrustado responsive

Añadir la clase .mdui-video-container al contenedor del vídeo incrustado para que el vídeo se adapte al ancho de su contenedor.

Ejemplo

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

Vídeo HTML5 responsive

Añadir la clase .mdui-video-fluid al elemento video para que el vídeo se adapte al ancho de su contenedor.

Ejemplo

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

Lista de clases CSS

Nombre de clase	Descripción
`.mdui-img-fluid`	Imagen Responsive
`.mdui-img-rounded`	Imagen redondeada
`.mdui-img-circle`	Imagen circular
`.mdui-video-container`	Vídeo incrustado Responsive
`.mdui-video-fluid`	Vídeo HTML5 Responsive

Iconos

Asistentes