图片

使用Materialize可以使用不同的方法给图片样式。

响应式图片

是图片的宽度适应页面的宽度，你可以增加类responsive-img到图片标签中。 现在它有max-width: 100% 和 height:auto。

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

圆形图像

这是一个正方形图片。增加"circle"类使它变圆形。

      <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 s2">
              <img src="images/yuna.jpg" alt="" class="circle responsive-img"> <!-- notice the "circle" class -->
            </div>
            <div class="col s10">
              <span class="black-text">
                这是一个正方形图片。增加"circle"类使它变圆形。
              </span>
            </div>
          </div>
        </div>
      </div>
            

视频

我们提供一个容器使植入的视频支持响应式。

响应式视频植入

为了使你植入的视频支持响应式。我们首先给他包含一个div容器，并添加video-container类。

      <div class="video-container">
        <iframe width="853" height="480" src="http://player.youku.com/embed/XNjE3NTc3Mzk2" frameborder="0" allowfullscreen></iframe>
      </div>
        

响应式视频

使HTML5 video视频标签支持响应式，只要添加responsive-video类给video标签。

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