如何使背景图像具有响应性(图像收缩)

i have developed a webpage where i am using a background image for a div.Background image is not responsive when i resize the browser.my code for this div is

我开发了一个网页，在这个网页中，我使用一个后台图片作为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>

please help how i can make this image responsive so that if i resize the browser the will remain same

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

5 个解决方案

#1

If you want to see the text on your image you should use 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; don't save the real image size

background-size:封面;不要保存真实的图像大小

Fiddle

小提琴

#2

Try using this method:

试着用这个方法:

background-size: cover;

#3

Use background-size: cover.

使用background-size:封面。

This will crop the image to maintain it's aspect ratio. This will not let the background image look stretched. Later you can change background-position for specific media sizes to show particular portions of the image.

这将裁剪图像以保持它的纵横比。这不会让背景图像看起来拉伸。稍后，您可以更改特定媒体大小的背景位置，以显示图像的特定部分。

P.S: Also avoid using inline styles if the styles do not have to be dynamic with some the back-end language like php.

P。S:如果样式不需要使用php之类的后端语言，也要避免使用内联样式。

#4

Use background-size: cover; on your div, which scales the image as large as possible and maintains image aspect ratio. The image "covers" the entire width or height of the container.

使用background-size:封面;在您的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>

Here's a JSFiddle.

这是一个JSFiddle。

#5

Add this

{

{

padding:0px;
background-size:100%

}