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

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% 值：

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

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

How to make a background-image on a image responsive

html

css

background