menu MDUI Documentation
color_lens
near_me
Start
keyboard_arrow_down
Instalation Compatibility JavaScript tool library JavaScript global methods
layers
Style
keyboard_arrow_down
Colors and themes Font Grid layout Typography Icon Media Helper class Shadow
widgets
Component
keyboard_arrow_down
Ripple animation effect Button Floating operation button Drop-down selection Divider Expandable panel Text box Select control Slider List List control Grid list Tab Tab toolbar App bar Navigation drawer Bottom navigation bar Card Scrap of paper Tooltip Snackbar Table Dialog box Menu Progress indicator
view_carousel
JavaScript Plug-in
keyboard_arrow_down
Collapse Headroom
local_mall
Resources
keyboard_arrow_down
Material icon

media

MDUI defines some classes for pictures and videos, which can make them have responsive characteristics and some predefined styles.

Related Reading

Material Design Guidelines: Style-Image

image

Responsive

in img Add a class to the label .mdui-img-fluid The image can be adapted to the width of its parent element.

codeplay_arrow
Example
100%x250 
<img class="mdui-img-fluid" src="image.png"/>

Fillet picture

in img Add a class to the label .mdui-img-rounded Make the picture rounded corners.

codeplay_arrow
Example
200x200 
<img class="mdui-img-rounded" src="image.png"/>

Round picture

in img Add a class to the label .mdui-img-circle Make the picture round.

codeplay_arrow
Example
200x200 
<img class="mdui-img-circle" src="image.png"/>

video

Responsive embedded video

Add a class to the parent element of the embedded video .mdui-video-container Make the video adapt to the width of the parent element.

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

Responsive HTML5 video

in video Add a class to the label .mdui-video-fluid Make the video adapt to the width of the parent element.

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

List of CSS class names

Class name effect
.mdui-img-fluid Responsive image
.mdui-img-rounded Fillet picture
.mdui-img-circle Round picture
.mdui-video-container Responsive embedded video
.mdui-video-fluid Responsive HTML5 video
arrow_back Previous
icon
arrow_forward Next
Auxiliary class
Set document theme

Theme color

Main color

Accent color

200x200