materialize-css/jade/page-contents/media-css_content.html

Builds Materialize distribution packages

<div class="container">
  <div class="row">

    <div class="col s12 m9 l10">

      <!-- Images -->
      <div id="images" class="section scrollspy">
        <h2 class="header">Images</h2>
        <p class="caption">Images can be styled in different ways using Materialize</p>

        <h4>Responsive Images</h4>
        <p>To make images resize responsively to page width, you can add the class <code class="language-markup">responsive-img</code> to your image tag. It will now have a <code class="language-markup">max-width: 100%</code> and <code class="language-markup">height:auto</code>.</p>
        <pre><code class="language-markup">
    &lt;img class="responsive-img" src="cool_pic.jpg">
        </code></pre>
        <h4>Circular images</h4>
        <div class="col s12 m8 offset-m2 l6 offset-l3">
          <div class="card-panel grey lighten-5 z-depth-1">
            <div class="row valign-wrapper">
              <div class="col s4 m2">
                <img src="images/yuna.jpg" alt="" class="circle responsive-img valign">
              </div>
              <div class="col s8 m10">
                <span class="black-text">
                  This is a square image. Add the "circle" class to it to make it appear circular.
                </span>
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col s12">
            <p>To make images appear circular, simply add <code class="language-markup">class="circle"</code> to them</p>
            <pre><code class="language-markup">
      &lt;div class="col s12 m8 offset-m2 l6 offset-l3">
        &lt;div class="card-panel grey lighten-5 z-depth-1">
          &lt;div class="row valign-wrapper">
            &lt;div class="col s2">
              &lt;img src="images/yuna.jpg" alt="" class="circle responsive-img"> &lt;!-- notice the "circle" class -->
            &lt;/div>
            &lt;div class="col s10">
              &lt;span class="black-text">
                This is a square image. Add the "circle" class to it to make it appear circular.
              &lt;/span>
            &lt;/div>
          &lt;/div>
        &lt;/div>
      &lt;/div>
            </code></pre>
          </div>
        </div>
      </div>

      <!-- Videos Section -->
      <div id="videos" class="section scrollspy">
        <h2 class="header">Videos</h2>
        <p class="caption">We provide a container for Embedded Videos that resizes them responsively.</p>
        <h4>Responsive Embeds</h4>
        <p>To make your embeds responsive, merely wrap them with a containing div which has the class <code class="language-markup">video-container</code></p>
        <div class="video-container">
          <iframe width="853" height="480" src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
        </div>
        <pre><code class="language-markup">
      &lt;div class="video-container">
        &lt;iframe width="853" height="480" src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen>&lt;/iframe>
      &lt;/div>
        </code></pre>
        <h4>Responsive Videos</h4>
        <p>To make your HTML5 Videos responsive just add the class <code class="language-markup">responsive-video</code> to the video tag.</p>

        <video width="100%" controls>
          <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
        </video>
        <pre><code class="language-markup">
  &lt;video class="responsive-video" controls>
    &lt;source src="movie.mp4" type="video/mp4">
  &lt;/video>
        </code></pre>

      </div>


    </div>

    <div class="col hide-on-small-only m3 l2">
      <div class="toc-wrapper">
        <div class="buysellads hide-on-small-only">
          <!-- CarbonAds Zone Code -->
          <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
        </div>
        <div style="height: 1px;">
          <ul class="section table-of-contents">
            <li><a href="#images">Images</a></li>
            <li><a href="#videos">Videos</a></li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>