html - 如何制作响应式背景图像(图像缩小)

Question

我开发了一个网页，我在其中使用 div 的背景图像。当我调整浏览器大小时背景图像没有响应。我的这个 div 的代码是

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-offset-1 col-lg-10 col-lg-offset-1" style="height:270px;background:url('images/whatsapp1.png');background-size:100% 100%">
 </div>

请帮助我如何使此图像响应，以便如果我调整浏览器的大小，它将保持不变

Answer 1

如果您想在图片上看到文字，您应该使用this:

padding: 12.5%;
background-size: contain;
-webkit-background-size: contain;
background-repeat: no-repeat;
background-image:url('/image/tQQHA.png');

background-size: cover;不保存真实图片大小

Fiddle