How to set beckground image full div without using height - html

Question

I have first div generated dynamically and second div I have placed it.
First div image is taking 200X200 by dynamically. Same size image i want to set it through css in second div.
But when I tried to set it and it's not taking full height 200 of the image.
If i mention min-height it's not coming properly for all resolutions. I don't want to specify min-height for the media queries.
How to set background image height automatically?
First Div structure
<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="product-thumb transition">
<div class="image"><img src="../image/cache/catalog/savouries/karasevu-200x200.jpg" alt="Karasevu" title="Karasevu" class="img-responsive"></div>
<div class="caption">
<h4>Karasevu</h4>
<p class="price"> $0.00 </p>
</div>
<div class="button-group home-btn">
<button class="producthome-btn" type="button" onClick="cart.add('71');"><i class="fa fa-shopping-cart cart-icon"></i> <span class="">Add to Cart</span></button>
</div>
</div>
</div>
Second Div structure
<div class="more-link product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="a-more-link"> VIEW MORE </div>
</div>

Answer 1

Use the background-size property.
.someClass {
background-image: url(someImage.jpg);
background-size: cover;
}

Answer 2

First method use background-size to 100%
.classname {
background-image: url(img.png);
background-size: 100%;
}
Second method use background-size to cover
.classname {
background-image: url(img.png);
background-size: cover;
}

Answer 3

Try using background-size:cover and you can center it by using background-position:center

Answer 4

Set your body element to 100% like this:
body{
height: 100%;
}
then use inherit or set your bg height to 100% like this:
.yourParentDiv{
height: 100%;
// your other code here
}