我正在开发一个定制吉他的应用程序。为了减少加载时间,我创建了一种 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;
}
最佳答案
试试`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>
关于html - 在响应式布局中调整大小时是否可以保持背景图像的纵横比?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42011673/