html - 在水平行中保持4列

我使用W3行容器将一行连续保留4列。但是，当添加图像时，该图像不适合容器且无法固定容器的高度。我将鼠标悬停在图像上时添加了缩放选项。那是好的w3容器，还是有什么最好的方法？

.item img {
    max-width: 100%;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.item:hover img {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}


<div class="w3-row" style="margin-left:2%;">
  <div class="w3-col w3-green w3-container" style="width:25%">
    <div class="item">
        <img src="../Images/stock-vector-romantic-pink-heart-background-vector-illustration-for-holiday-design-many-flying-hearts-on-white-370450901.jpg" style="width:100%">
    </div>
  </div>

  <div class="w3-col w3-blue w3-container" style="width:2%">
    <p>30%</p>
  </div>
  <div class="w3-col w3-dark-grey w3-container" style="width:20%">
    <p>35%</p>
  </div>
  <div class="w3-col w3-blue w3-container" style="width:2%">
    <p>30%</p>
  </div>
  <div class="w3-col w3-blue w3-container" style="width:25%">
    <div class="item">
        <img src="../Images/stock-vector-romantic-pink-heart-background-vector-illustration-for-holiday-design-many-flying-hearts-on-white-370450901.jpg" style="width:100%">
    </div>
  </div>
  <div class="w3-col w3-blue w3-container" style="width:2%">
    <p>30%</p>
  </div>
  <div class="w3-col w3-purple w3-container" style="width:20%">
    <p>10%</p>
  </div>
</div>

最佳答案

为了使图像适合容器，请在块/单元格中使用引导程序类缩略图，并在具有缩略图类的div标签中使用图像。然后将图像标记与bootstrap类img-response一起使用。
如果您根据容器/单元使用宽高比好的图像，效果会更好。

请先阅读上述类，然后再使用。