Html 是否可以维护背景图像'；在响应性布局中调整尺寸时的纵横比？

我正在开发一个定制吉他的应用程序。为了减少加载时间，我创建了一种精灵表，吉他主体和所有部分都在一个或两个图像中。在下面我正在处理的代码块中，一个div标记正在被样式化

对于该图像，原始比例为2870像素宽乘1700像素高。在下面的示例中，被“裁剪”或由背景图像属性显示的图像的宽度为1001像素，高度为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;
}

---

试试高度：0；垫底：30.895%；30.895%是高度占宽度的百分比

#卡米拉模板#{
背景图像：url（../img/jpg_sprite.jpg）；
背景位置：0%23.7%；
背景重复：无重复；
背景大小：286.713%524%；
显示：块；
保证金：0自动；
高度：0px；
最大宽度：1001px；
位置：相对位置；
垫底：32.567%；
}

---

当我使用“最大宽度”属性时，高度没有响应，背景图像不随宽度缩放。Dave，你建议编辑我的代码，但你正在更改填充中使用的%值。你为什么要改变这个？我对“59.2%是高度占宽度的百分比”的解释不再相关，如果您更改了%值，那么我的帖子中就没有关于如何获得%值的解释。我想知道你是怎么弄到这个新的填充物的。我又看了一遍，我仍然在努力想这个。“裁剪出的”又名背景图像部分的宽度为1001像素宽乘以326像素高。326除以1001等于.325674，所以我当前的逻辑是宽度是高度的32.567%。因此，底部填充物应为32.567%。我不确定我从哪里得到了30.895%，但在预览中看起来确实不错，因为它接近计算出的32.567%。当最大宽度达到1001像素时，我仍然有图像倾斜的问题。身高继续增长。好的，是的，你的数学是正确的。re：图像倾斜，这与

背景大小

属性有关。我需要看到您的完整代码和工作图像，以及您期望的行为是否有帮助。这就是GitHub的用途吗？GitHub教程在我的待办事项列表中。我通过将最大宽度设置为100%并将div包装到另一个最大宽度为1001像素的div中，修复了倾斜。谢谢你的帮助！