如何使背景图像响应

Question

How do I get my #img-alfa image responsive? I already tried background-size:100% auto; and if I delete the width and height of the background-image it totally disappears.

 .img-responsive { width: 100%; vertical-align: middle; } #img-alfa { top: -60px; left: 68px; height: 200px; width: 150px; position: absolute; background: url("../img/alfazwartwitsmall2.png") no-repeat; } #img-alfa:hover { top: -60px; left: 68px; height: 200px; width: 150px; position: absolute; background: url("../img/alfakleursmall2.png") no-repeat; } 

 <div class="col-xs-6 col-sm-3 placeholder"> <img class="img-responsive" src="img/background_white.jpg"> <span class="circle_inner"> <a href="#"><div style="border-radius: 0em;" class="img-responsive" id="img-alfa" ></div></a> </span> </div> 

Thanks!

Answer 1

You could use background-size: cover; , with a trick to keep your image ratio:

 .img-responsive { width: 100%; vertical-align: middle; } #img-alfa { padding-bottom: 75%; /* See comments under snippet */ background-image: url("https://placekitten.com/g/200/150"); background-size: cover; } 

 <img class="img-responsive" src="https://placekitten.com/200/150"> <div class="img-responsive" id="img-alfa"></div> 

The trick is to use a percent value for padding-bottom . The value will be calculated, based on the width value (= 100%). Here how to define the 75% value:

padding-bottom = 100 * height / width = 100 * 150 / 250 = 75