Question

我希望这很简单，但这是我正在做的代码，除了一件事之外，它的工作原理很完美，规模并没有保留。它变得宽阔然后看起来很傻。

.div1 {
background-image: url("images/headerbgimage2.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center center;
}

图像在调整大小时会缩放，在较小的尺寸上看起来很正常，但随着它变得更大（更宽），它会拉伸并且看起来很笨拙。我怎样才能使图像保持其方面，只是＆＃34;缩放＆＃34;本身保持整个div覆盖和图像缩放。

在网站上工作的一个例子是techhubdenver .com及其顶级div背景图片

这可以用CSS完成，还是需要一些Javascript编码才能完成。

我知道如何为响应式页面制作新图像，但我希望只使用一个图像并使其无论设备如何都能正常工作。当屏幕尺寸偏离图像尺寸（太小或太宽）时，它只会成为一个问题。

如果图像只是＆＃34;缩小＆＃34;但保持较小设备的宽高比我认为它会起作用，如果图像只是放大＆＃34;放大＆＃34;当屏幕尺寸变大时，保持在图像的中心我觉得它会很好用。

保持宽高比并始终填充div（可以放大）是我的目标。

Answer 1

您需要background-size: cover;。这将扩展您的背景，使其覆盖元素。

.div1 {
    background-image: url("images/headerbgimage2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

背景图像以调整大小为中心，保持规模

1 个答案: