html - 在响应式布局中调整大小时是否可以保持背景图像的纵横比？

Question

我正在开发一个定制吉他的应用程序。为了减少加载时间，我创建了一种 sprite 表，其中吉他琴身和所有部件都在一个或两个图像中。在下面我正在处理的代码块中，正在设置一个 div 标签的样式。

对于此图像，原始比例为 2870 像素宽 x 1700 像素高。在下面的示例中，被“裁剪”或由背景图像属性显示的图像为 1001 像素宽 x 326 像素高。

我尝试使用百分比，但无法弄清楚如何在更改响应式布局的 div 标记的宽度时保持比例。

#camila_template_wpr {
    background-image: url(../img/jpg_sprite.jpg);
    background-position: 0% 23.7%;
    background-repeat: no-repeat;
    background-size: auto 524%;
    display: block;
    margin: auto;
    height: 324px;
    max-width: 1001px;
    position: relative;
}

Answer 1

试试`height: 0;底边距:30.895%； 30.895% 是高度占宽度的百分比。

#camila_template_wpr {
background-image: url(../img/jpg_sprite.jpg);
background-position: 0% 23.7%;
background-repeat: no-repeat;
background-size: 286.713% 524%;
display: block;
margin:  0 auto;
height: 0px;
max-width: 1001px;
position: relative;
padding-bottom: 32.567%;
}

<div id="camila_template_wpr"></div>