我有一个网站(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的原始问题,即有关按窗口大小缩放的问题。在其他用例中,您可能需要设置宽度/高度/边距。