near_me
Erste Schritte
keyboard_arrow_downlayers
Stil
keyboard_arrow_downwidgets
Komponenten
keyboard_arrow_downlocal_mall
Ressourcen
keyboard_arrow_downDas neue mdui 2 auf Basis von Material Design 3 und Web Components ist da. Zur mdui 2 Dokumentation wechseln.
Medien
mdui definiert einige Klassen für Bilder und Videos, um ihnen responsive Eigenschaften und einige vordefinierte Stile zu verleihen.
Verwandte Themen
Bilder
Responsive
Durch Hinzufügen der Klasse .mdui-img-fluid zum img-Tag passt sich das Bild automatisch der Breite seines Elternelements an.
Abgerundete Bilder
Durch Hinzufügen der Klasse .mdui-img-rounded zum img-Tag erhält das Bild abgerundete Ecken.
Kreisförmige Bilder
Durch Hinzufügen der Klasse .mdui-img-circle zum img-Tag wird das Bild kreisförmig.
Videos
Responsive eingebettete Videos
Durch Hinzufügen der Klasse .mdui-video-container zum Elternelement eines eingebetteten Videos passt sich das Video automatisch der Breite des Elternelements an.
Beispiel
<div class="mdui-video-container">
<iframe
height="498"
width="510"
src="https://player.youku.com/embed/XNzUwOTk5MzE2"
frameborder="0"
allowfullscreen
></iframe>
</div>Responsive HTML5-Videos
Durch Hinzufügen der Klasse .mdui-video-fluid zum video-Tag passt sich das Video automatisch der Breite des Elternelements an.
Beispiel
<video class="mdui-video-fluid" controls>
<source src="video.mp4" type="video/mp4" /></video
>