Question

如何让我的#img-alfa图片响应？我已经尝试了background-size:100% auto;，如果我删除width的{{1}}和height，它就会完全消失。

＆＃13;

background-image

＆＃13;

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

＆＃13;

谢谢！

Answer 1

你可以使用background-size: cover;，诀窍来保持你的图像比例：

＆＃13;

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

＆＃13;

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

＆＃13;

诀窍是使用padding-bottom的百分比值。将根据宽度值（= 100％）计算该值。这里有如何定义75%值：

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

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

1 个答案: