Question

我正在制作一个定制吉他的应用程序。为了减少加载时间，我创建了一种精灵表，其中吉他体和所有部件都在一个或两个图像中。在我正在编写的代码块中，正在设置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;
}

Answer 1

尝试`height：0; padding-bottom：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>

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

1 个答案: