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

目前，我创建了一个1288x200图像（）

我希望它显示为100px高度的横幅。我之所以使用2x高度，是因为我希望它在视网膜显示中看起来很好

正如您在当前结果中看到的，它看起来不太好-

我试着从

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

到

但是，结果仍然是一样的

---

有谁能给我一些提示，告诉我如何按比例缩小背景图像？

您将背景大小设置为

contain

，这样它就可以在您的高度中包含您的图像

.banner{
高度：100px；
背景：#3B3E44 url（“https://jstock.org/images/banner.png");
背景重复：无重复；
背景尺寸：包含；
背景位置：中心；
}

---

请包括一个。您可以使用来执行此操作。背景尺寸上可能存在重复的

100%auto

？非常感谢！我的错误是我把

背景重复

，

背景大小

和

背景位置

放在

背景

之前。顺序确实重要？但我的测试表明顺序确实重要。通过移动

background:#3B3E44 url（“https://jstock.org/images/banner.png");持续多久？当你在上面添加
background
css时，顺序很重要，因为
background
有自己的syntex，当你使用背景图像、背景位置、背景颜色时，你可以访问此链接并清除你的疑问，然后顺序就不重要了
.banner {
    height: 100px;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background: #3B3E44 url('images/banner.png');
}