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('https://i.stack.imgur.com/tQQHA.png');

background-size: cover;不保存实际图片尺寸

<强> Fiddle

Answer 2

在background-size: cover;上使用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: cover;">
</div>

这是JSFiddle。

Answer 3

尝试使用此方法：

background-size: cover;

Answer 4

使用 background-size: cover 。

这将裁剪图像以保持其纵横比。这不会让背景图像看起来拉长。稍后，您可以针对特定介质尺寸更改background-position以显示图像的特定部分。

P.S：如果样式不必像php一样使用后端语言，也要避免使用内联样式。

Answer 5

添加此

{

padding:0px;
background-size:100%

}

如何制作响应式背景图像（缩小图像）

5 个答案:

添加此