如何使背景圖像響應

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