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-imgto your image tag. It will now have a max-width: 100%and height:auto.

style typography

Circular images

To make images appear circular, simply add class="circle"to them

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-controlsclass to the video container.

Responsive Videos

To make your HTML5 Videos responsive just add the class responsive-videoto the video tag.