How To Use Materialize CSS Media?

Diwakar Chauhan
Feb 13, 2023
Materialize CSS Media

Materialize CSS Media provides different classes that are used to make images and videos responsive with respect to different viewport widths.

Materialize CSS Media provides different classes that are used to create an image and video responsive.

Media Classes:

  • .responsive-img − Used to make images responsive.
  • .video-container − used to make embedded videos responsive.
  • .responsive-video-used to make HTML5 videos responsive.

Responsive Images

To make responsive images, assign .responsive-img to the <img> element base class. It sets max-width: 100% and height: auto for the image.

General Syntax

<img class="responsive-img" src="cool_pic.jpg" alt="responsive image">

Circular images

To make circular image assign, .circle and to make it responsive assign an alternative class .img-responsive to the <img> element base class.

General Syntax

<img src="../images/materialize-circle.jpg" class="responsive-img circle" alt="Image Circle">

To read more about Materialize CSS Media, click here.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Diwakar Chauhan
Diwakar Chauhan

Written by Diwakar Chauhan

I am a full-stack web developer, web designer, graphics designer, dba, search engine optimizer, passionate entrepreneur. https://sudhakarinfotech.com

No responses yet

What are your thoughts?