如何正确按比例缩小背景图像？

Question

当前，我创建一个1288x200的图片（https://jstock.org/images/banner.png）。

我希望它显示为100像素高的横幅。我之所以使用2倍高，是因为我希望它在视网膜显示中看起来不错。

正如您在当前结果中看到的那样，它看起来并不好-https://jstock.org/

我尝试更改

.banner {
    height: 100px;
    background: #3B3E44 url('images/banner.png');
}

到

.banner {
    height: 100px;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background: #3B3E44 url('images/banner.png');
}

但是，结果仍然相同。

有人可以给我一些有关如何按比例缩小背景图像的提示吗？

Answer 1

您将背景尺寸设置为contain，这样它就包含了您身高的图像

.banner {
    height: 100px;
    background: #3B3E44 url("https://jstock.org/images/banner.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

<div class="banner"></div>