响应式CSS背景图像

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个网站（g-floors.eu），并且我想使背景（在CSS中我为内容定义一个bg图像）也具有响应性。不幸的是，除了我可以想到的一件事外，我真的对如何执行此操作一无所知，但这是一个解决方法。创建多个图像，然后使用css屏幕大小更改图像，但是我想知道是否有更实用的方法来实现此目的。

基本上，我想要实现的是图像（带有水印“ G”）自动调整大小，而不会显示更少的图像。如果可能的话

我到目前为止的代码（内容部分）

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

回答：

如果要根据浏览器窗口的大小缩放同一图像：

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

请勿设置宽度，高度或边距。

编辑：关于未设置宽度，高度或边距的上一行是指OP的原始问题，即有关按窗口大小缩放的问题。在其他用例中，您可能需要设置宽度/高度/边距。

以上是 响应式CSS背景图像 的全部内容， 来源链接： utcz.com/qa/400471.html

回到顶部