如何使背景图像响应

Question

如何使#img-alfa图片具有响应性？ 我已经尝试过background-size:100% auto; 如果我删除background-image的width和height ，它将完全消失。

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

谢谢！

Answer 1

您可以使用background-size: cover; ，还有一个技巧来保持图像比例：

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

技巧是为padding-bottom使用百分比值。 将根据宽度值 （= 100％）计算该值 。 以下是如何定义75%值：

底部填充= 100 *高度/宽度= 100 * 150/250 = 75