背景图像以调整大小为中心，保持比例

Question

我希望这很简单，但这是我正在做的代码，它工作得很好，除了一件事，比例没有保留。它变宽了，然后看起来很傻。

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

图像在调整大小时会缩放，在较小的尺寸上它看起来很正常，但随着它变大（变宽），它会拉伸并看起来很别扭。我怎样才能使图像保持其外观并仅 "zooms" 自身保持整个 div 覆盖并缩放图像。

Techhubdenver.com 是网站上的一个例子，其顶部 div 背景图片

这可以用 CSS 完成吗？还是我需要一些 Javascript 编码才能做到这一点。

我知道如何为响应式页面制作新图像，但我希望只使用一张图像并让它在任何设备上都能正常工作。只有当屏幕尺寸与图像尺寸相差很大（太小或太宽）时才会成为问题。

如果图像只是 "shrink" 但保持较小设备的宽高比我认为它会起作用，如果图像只是 "zoom in" 在屏幕尺寸变大时停留在图像的中心大到我认为它会很好用。

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

Answer 1

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

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

背景图像以调整大小为中心，保持比例

Background Image centered on resize, scale kept

css

background-image