响应式 css 背景图片 [英] Responsive css background images

问题描述

我有一个网站 (g-floors.eu) 并且我想让背景(在 css 中我为内容定义了一个 bg-image)也具有响应性.不幸的是，除了我能想到的一件事之外，我真的不知道如何做到这一点，但这是一个很好的解决方法.创建多个图像，然后使用 css 屏幕大小来更改图像，但我想知道是否有更实用的方法来实现这一点.

I have a website (g-floors.eu) and I want to make the background (in css I have defined a bg-image for the content) also responsive. Unfortunately I really don't have any idea on how to do this except for one thing that I can think of but it's quite a workaround. Creating multiple images and then using css screen size to change the images but I wanna know if there is a more practical way in order to achieve this.

基本上我想要实现的是图像(带有水印G")自动调整大小而不显示更少的图像.当然如果可能的话

Basically what I wanna achieve is that the image (with the watermark 'G') automatically resizes without displaying less of the image. If it's possible of course

链接:g-floors.eu

我目前拥有的代码(内容部分)

Code I have so far (content part)

#content {
  background-image: url('../images/bg.png');
  background-repeat: no-repeat;
  position: relative;
  width: 85%;
  height: 610px;
  margin-left: auto;
  margin-right: auto;
}

推荐答案

如果您希望根据浏览器窗口的大小缩放相同的图像:

If you want the same image to scale based on the size of the browser window:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

不要设置宽度、高度或边距.

Do not set width, height, or margins.

上一行关于不设置宽度、高度或边距是指 OP 关于随窗口大小缩放的原始问题.在其他用例中，您可能需要根据需要设置宽度/高度/边距.

The previous line about not setting width, height or margin refers to OP's original question about scaling with the window size. In other use cases, you may want to set width/height/margins if necessary.

这篇关于响应式 css 背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！