Question

如果div框已经缩放width : 100%，我怎样才能有一个完美的比例background image？如果我尝试background-image : 100% 100%，则背景图片太过拉伸。

这是我的css代码，用于背景图片所在的标题：

.header-main-bar {
    float: left;
    width: 100%;
    background: url(BerlinFrontpage.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

Answer 1

我认为你必须至少给出高度：auto;因为否则它不会正确缩放。

（Am bestenwäreeswenn du dein Beispiel mal mit Codepen.iopostenwürdest.Dannkönntemandir noch eher helfen。）

Answer 2

您可以使用background-size:cover;

Answer 3

感谢您的信息。

这是指向我的问题的链接：https://urban-garden24.webshopapp.com/

标题中的背景图片..

我尝试过背景尺寸：封面和背景尺寸：100％100％

div容器很小我认为

Answer 4

我发现包含背景图片的div容器只有大小：100％，所以也许如果我改变容器的大小，但我希望容器也有响应...嗯任何人都有想法？

这里的容器宽度为100％且没有enter image description here

的图片

without and with width: 100%

已经响应的div容器，如何制作具有完美比例的响应式背景图像

4 个答案: