媒体样式

优质

小牛编辑

140浏览

2023-12-01

图片

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

响应式图片

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


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

圆形图像

为了使用图片出现圆形，给它们增加 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="https://www.xnip.cn/wp-content/uploads/2020/docimg2/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>