Bootstrap column divs responsively same sized as img

Question

So I have some product boxes in boostrap grid fluid-container and within there are img tags with pictures of the product.

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

Now when you decrease the width of the viewport the img scales to the column size respectively.

Now my question is, can you and is there a proper way to replace the img tag with a div tag and give it some styling that it scales equally well like the img does when decreasing the screen width.

Answer 1

add position absolute div

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

and css is

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