CSS媒体



图片

Materialize已定义了多种图片样式

响应式图片

为了响应式地处理图片大小,添加 responsive-img 到img标签中就可以。原理是它定义了 max-width: 100%height:auto两个属性。


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

圆形图片

使用circle就能把方形图片转化为圆形的。

为了使图片看起来是圆的,使用 class="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">
            This is a square image. Add the "circle" class to it to make it appear circular.
          </span>
        </div>
      </div>
    </div>
  </div>
            

视频

我们提供了能自适应大小的内嵌视频容器。

响应式内嵌

为了使嵌入的视频支持响应式,提供一个带 video-container的div包裹着视频就行。


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

响应式视频

在video标签上使用 responsive-videoclass,就能让html5视频标签支持响应式。


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