图像未调整大小

Question

我正在使用materializedcss创建一个画廊网站。我正在尝试使其每行显示4张图像，但它们看起来并不那么大，但是按照我写的内容，所有图像均以完整尺寸显示，而不是最小化然后通过装箱的方式进行扩展类。我不确定这是我写的css的问题，还是通过物化的materialboxed类，但是从jsfiddle看来，这是他们的类的问题。

https://jsfiddle.net/ptfbkwre/

https://materializecss.com/media.html

<div id="recent">
      <div class="imagetab-grid">
        <img class="materialboxed" src="img/xjErLux.jpg" data-caption="short description. idk. image looks cool!">
      </div>
      <div class="imagetab-grid">
        <img class="materialboxed" src="img/07xoCEp.jpg" data-caption="short description. idk. image looks cool!">
      </div>
      <div class="imagetab-grid">
        <img class="materialboxed" src="img/903IrFQ.jpg" data-caption="short description. idk. image looks cool!">
      </div>
    </div>

.imagetab-grid{
  width: 25%;
  margin: 10px;
  padding: 10px;
}

.imagetab-grid>img {
  width: 100%;
}

Answer 1

嘿，希望这可以帮助我分叉您的Fiddle，并进行了一些修改并在此处附加了代码。

.imagetab-grid {
  box-sizing: border-box;
  width: 25%;
  padding: 5px;
  float: left;
}

.imagetab-grid img {
  width: 100%;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

<div id="recent" class="row">
  <div class="imagetab-grid">
    <img class="materialboxed" src="https://dikxrpw3rdepo.cloudfront.net/wp-content/uploads/2017/01/tbs2_ost_interior_2560x1440.png" data-caption="short description. idk. image looks cool!">
  </div>
  <div class="imagetab-grid">
    <img class="materialboxed" src="https://steamuserimages-a.akamaihd.net/ugc/940586530515504757/CDDE77CB810474E1C07B945E40AE4713141AFD76/" data-caption="short description. idk. image looks cool!">
  </div>
  <div class="imagetab-grid">
    <img class="materialboxed" src="https://steamuserimages-a.akamaihd.net/ugc/940586530515504757/CDDE77CB810474E1C07B945E40AE4713141AFD76/" data-caption="short description. idk. image looks cool!">
  </div>
  <div class="imagetab-grid">
    <img class="materialboxed" src="https://steamuserimages-a.akamaihd.net/ugc/940586530515504757/CDDE77CB810474E1C07B945E40AE4713141AFD76/" data-caption="short description. idk. image looks cool!">
  </div>
  <div class="imagetab-grid">
    <img class="materialboxed" src="https://preppywallpapers.com/wp-content/uploads/2019/01/header2.jpg" data-caption="short description. idk. image looks cool!">
  </div>

</div>

Reference here

Answer 2

如果要以Materialize方式而不是通用的CSS方式执行此操作，请使用提供的.reponsive-img实用程序类来强制图像遵守其容器的宽度：

<img src="" alt="" class="responsive-img">

此外，您可以使用提供的网格系统轻松实现4列网格-这就是它的用途：

<div class="container">
  <div class="row">
    <div class="col s12 m6 l3">
      <img src="" alt="" class="responsive-img">
    </div>
    <div class="col s12 m6 l3">
      <img src="" alt="" class="responsive-img">
    </div>
    <div class="col s12 m6 l3">
      <img src="" alt="" class="responsive-img">
    </div>
    <div class="col s12 m6 l3">
      <img src="" alt="" class="responsive-img">
    </div>
  </div>
</div>

Codepen。