Bootstrap列div的响应大小与img相同

Question

所以我在boostrap网格容器中有一些产品盒，里面有img标签，上面有产品图片。

<div class="col-xs-6 col-sm-4 col-md-3 col-lg-3">
  <div class="product-item">
     <img class="product-image" src="images/product-placeholder.jpg">
    </div>
  </div>

现在，当您减小视口的宽度时，img将分别缩放为列大小。

现在我的问题是，你是否有一种正确的方法可以用div标签替换img标签，并给它一些样式，它可以像img那样在缩小屏幕宽度时同样缩放。

Answer 1

添加位置绝对div

<div class="col-xs-6 col-sm-4 col-md-3 col-lg-3">
  <div class="product-holder">
    </div>
  </div>

和css是

*.product-holder{
     position:absolute;
     top:0;
     bottom:0;
     left:0;
     right:0;
     width:100%;
     height:100%;
    }