Materialize CSS Media
https://shapeyourpath.com/materialize/materialize-css-media-tutorial

Materialize CSS Media

Materialize CSS Media is used to deal with images and videos.It provides?.responsive-img?&?.responsive-video?classes that are used to make image and video responsive correspondingly.

Followings are the media classes:

  • .responsive-img?? It is used to make images responsive.
  • .video-container?? It is used to make embedded videos responsive.
  • .responsive-video- It is used to make HTML5 videos responsive.

Responsive Images

To make an image responsive, add the?.responsive-img?class to the?<img>?element base class. This class sets the image?max-width: 100%?and?height: auto?properties.

General Syntax

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

Source Code


<img class="responsive-img" src="../code-support/images/bootstrap/bird.jpg" alt="responsive image" width="250" height="250">        

Circular images

To make a circular image assign the?.circle?class to the?<img>?element base class.

General Syntax


<img src="..." class="circle" alt="Circular Image">        

Source Code


<img src="../code-support/images/bootstrap/bird.jpg" class="circle" alt="Circular Image" height="300" width="300">        

Responsive Embeds

To create an embedded video responsively, add the embedded video inside the?<video>?element and assign the?.video-container?class.

General Syntax


<div class="video-container">
     <iframe src=".." frameborder="0" allowfullscreen></iframe>
</div>        

Source Code


<div class="container">
<div class="row">
    <div class="video-container">
        <iframe width="853" height="480" src="https://www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>
</div>        

Responsive Videos

To create an HTML 5 video responsive, add HTML 5 video inside the?<video>?element and assign it?the .responsive-video?class.

General Syntax


<video class="responsive-video" controls>
      <source src="../images/html5-video.mp4" type="video/mp4">
 </video>        

Source Code

<div class="container">
  <div class="row center-align">
    <video class="responsive-video" controls>
      <source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
     </video>
 </div>
</div>        

To read more click here...

要查看或添加评论,请登录

Diwakar Chauhan的更多文章

  • Bootstrap Container Class

    Bootstrap Container Class

    In this tutorial, you will learn and understand the Bootstrap container class with the help of multiple examples…

  • Bootstrap Fixed Width Container

    Bootstrap Fixed Width Container

    Bootstrap containers are an essential element in the Bootstrap grid system. It plays an important role during grid…

  • Bootstrap Fluid Container

    Bootstrap Fluid Container

    Bootstrap fluid container/Bootstrap container fluid spans the entire width of the viewport or screen. It takes 100%…

  • Bootstrap Responsive Container

    Bootstrap Responsive Container

    Bootstrap responsive container covers 100% available width of the screen until the specified breakpoint, after which it…

  • Container in Bootstrap

    Container in Bootstrap

    The container in Bootstrap is used to set the padding around the content as well left and right margin to the content…

  • Bootstrap Containers

    Bootstrap Containers

    Bootstrap containers are the basic layout element in the Bootstrap grid system that is used to create empty space…

  • JSON Examples

    JSON Examples

    This section contains different JSON examples that belong to different JSON functions. Each function's feature has been…

  • HTML 5 Examples

    HTML 5 Examples

    This section consists of different HTML 5 examples that belong to different HTML 5 elements. Each element's feature has…

  • CSS 3 Examples

    CSS 3 Examples

    This section consists of different CSS 3 examples that belong to different CSS 3 components. Each component's feature…

  • Javascript Examples

    Javascript Examples

    This section consists of different Javascript examples that belong to different Javascript functions and features. JS…

社区洞察

其他会员也浏览了