html - 如何使图像适合容器？

我正在尝试使用Bootstrap网格系统，每个行有4列包含图像，但是图像大小很大，并且超出了它的容器，所以我设置了imageposition: absolute和divposition: relative，但它仍然不起作用。有什么方法可以使图像与div容器的大小相匹配吗？

.sec5row {
  border: 1px solid red;
  position: relative;
}

.filter {
  position: absolute;
}

<div class="container">
  <div class="row">
    <div class="col-md-3 sec5row">
      <img class="filter" src="https://placehold.it/40" alt="f1">
    </div>
    <div class="col-md-3 sec5row">
      <img class="filter" src="https://placehold.it/40" alt="f1">
    </div>
    <div class="col-md-3 sec5row">
      <img class="filter" src="https://placehold.it/40" alt="f1">
    </div>
    <div class="col-md-3 sec5row">
      <img class="filter" src="https://placehold.it/40" alt="f1">
    </div>
  </div>
  <div>

最佳答案

您可以使用下面的代码将图像放入响应div中

 .filter {
     width:100%;/*To occupy image full width of the container and also fit inside the container*/
     max-width:100%/*To fit inside the container alone with natural size of the image ,Use either of these width or max-width based on your need*/
    height:auto;
    }

关于html - 如何使图像适合容器？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38322873/