图像未调整大小

Question

我正在制作一个实体化的画廊网站css。我试图让它每行显示 4 张图像，它们看起来不是那么大，但是根据我所写的内容，所有图像都以完整尺寸显示，而不是最小化然后通过 materialboxed 展开class。我不确定这是我写的 css 的问题，还是通过物化的 materialboxed class 的问题，但是从 jsfiddle 来看，这似乎是他们的 class 的问题.

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 实用程序 class 强制图像遵守宽度他们的容器：

<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.

图像未调整大小

Images are not resizing

html

css

materialize