menuMDUIDocs
color_lens
È disponibile il nuovo mdui 2 basato su Material Design 3 e Web Components, vai alla documentazione di mdui 2.

Media

mdui definisce alcune classi per immagini e video, permettendo loro di avere caratteristiche responsive e alcuni stili predefiniti.

Letture correlate

Linee guida di design Material Design: Stili - Immagini

Immagini

Responsive

Aggiungi la classe .mdui-img-fluid al tag img per rendere l'immagine adattabile alla larghezza del suo elemento padre.

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

Immagini con angoli arrotondati

Aggiungi la classe .mdui-img-rounded al tag img per dare all'immagine angoli arrotondati.

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

Immagini circolari

Aggiungi la classe .mdui-img-circle al tag img per rendere l'immagine circolare.

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

Video

Video incorporato responsive

Aggiungi la classe .mdui-video-container all'elemento padre del video incorporato per rendere il video adattabile alla larghezza dell'elemento padre.

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

Video HTML5 responsive

Aggiungi la classe .mdui-video-fluid al tag video per rendere il video adattabile alla larghezza dell'elemento padre.

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

Elenco classi CSS

Nome classeDescrizione
.mdui-img-fluidImmagine responsive
.mdui-img-roundedImmagine con angoli arrotondati
.mdui-img-circleImmagine circolare
.mdui-video-containerVideo incorporato responsive
.mdui-video-fluidVideo HTML5 responsive
arrow_backPrevious
Icone
arrow_forwardNext
Classi ausiliarie