Media can be styled in different ways using Materialize.
Responsive Images
To make images resize responsively to page width, you can add the class responsive-img
to your image tag. It will now have a max-width: 100%
and height:auto
.
![style typography](images/style_typography_roboto.png)
Circular images
To make images appear circular, simply add class="circle"
to them
![](images/avatar.jpg)
This is a square image. Add the "circle" class to it to make it appear circular.
Videos
We provide a container for Embedded Videos that resizes them responsively.
Responsive Embeds
To make your embeds responsive, merely wrap them with a containing div which has the class video-container
If your video does not have video controls, add the no-controls
class to the video container.
Responsive Videos
To make your HTML5 Videos responsive just add the class responsive-video
to the video tag.