html - 如何使图像上的背景图像响应

Question

如何获得我的 #img-alfa图像响应？我已经试过了 background-size:100% auto;如果我删除 width和 height的 background-image它完全消失了。

.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% 值:

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