菜单

图像

可以使用 Materialize 以不同方式设置图像样式


响应式图像

要使图像根据页面宽度进行响应式调整，可以将类 responsive-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>

视频

我们提供一个嵌入式视频容器，可以根据需要调整其大小。


响应式嵌入

要使嵌入内容具有响应性，只需用一个包含 div（具有类 video-container）将其包装起来即可


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

响应式视频

要使 HTML5 视频具有响应性，只需将类 responsive-video 添加到视频标记即可。


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