降临节日历CSS背景位置

Question

我正在制作一个降临节日历。。在此处测试CodePen：https://codepen.io/ultrabritain/pen/jOrXYOL?editors=1100

HTML

<div class='doorContainer'>
<div class='doorOuter'>
<div class='doors'>
<div class="door1 door">  
</div><div class="door2 door">  
</div>
</div>
</div>
</div>

CSS

* { position:relative; margin:0; padding:0; }
html, body {
height:100%;
width:100%;
}
.doorContainer { 
width:100%; 
height:100%; 
padding:0; 
margin:0; 
}

.doorOuter {
padding-bottom:56.25%;
}
.doors {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
background:url(https://www.ultrabritain.com/TWDCCMSv5/EventClient/EventImages/tgd3423wsz_A8djF4Z5dg) no-repeat;
background-size:contain;
}
.door {
position:absolute;
border:1px dashed #fff;
background:brown url(https://www.ultrabritain.com/TWDCCMSv5/EventClient/EventImages/tgd3423wsz_A8djF4Z5dg);
background-repeat:no-repeat;
}
.door1 {
top:5%;
left:5%;
width:10%;
height:20%;
background-position:5.6% 6.4%;
background-size:1000%; 
}
.door2 {
top:15%;
left:55%;
width:10%;
height:25%;
background-position:61.2% 20.2%;
background-size:1000%;
}

我为日历使用了一个固定的纵横比DIV，背景图像设置为backgroundsize：contain来填充DIV。src图像与DIV的纵横比相同。

门的绝对位置和大小使用%单位，因此日历具有响应性。我希望这些门具有相同的背景图像(我会用transform3d打开它们，所以这就是为什么我需要在背景上复制(。

示例门位于顶部：5%；左：5%；宽度：10%；高度：20%；背景大小：1000%

我本以为设置背景位置：5%5%会起作用，但经过反复尝试，我发现需要5.6%6.4%。

知道为什么这些价值观不是我所期望的吗？或者有更简单的方法吗？

Answer 1

EDIT：问题似乎是我们无法获得图像与视口的所有纵横比的精确定位。填充底部是一种近似值，通常用于获得16:9的视频，但在这种情况下，我们没有非常整齐的数字作为图像的基本尺寸(1599x900(。

我所能得到的最接近的是在这个代码中。也许强制图像的大小更"正常"可能会有所帮助，但我不认为这对所有设备的纵横比都是可以的。

<style>
* {
--w: 1599; /* the width of the image */
--h: 900; /* the height of the image */
position:relative;
margin:0;
padding:0;
}
html, body {
height:100%;
width:100%;
}
.doorContainer { 
width:100%; 
height:100%; 
padding:0; 
margin:0; 
}

.doorOuter {
/*  padding-bottom:56.25%; *//* not accurate enough*/
}
.doors {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100vw;
height: calc(calc(100vw * var(--h)) / var(--w)); /* this wont be absolutely accurate in most cases */
background:url(https:/www.ultrabritain.com/TWDCCMSv5/EventClient/EventImages/tgd3423wsz_A8djF4Z5dg) no-repeat;
background-size:contain;
}
.door {
position:absolute;
border:1px dashed #fff;
background:brown url(https://www.ultrabritain.com/TWDCCMSv5/EventClient/EventImages/tgd3423wsz_A8djF4Z5dg);
background-repeat:no-repeat;
}
.door1 {
top:5%;
left:5%;
width:10%;
height:20%;
background-position:5.6% 6.4%;
background-size:1000%; 
}
.door2 {
top:15%;
left:55%;
width:10%;
height:25%;
background-position:61.2% 20.2%;
background-size:1000%;
}
</style>
<div class='doorContainer'>
<div class='doorOuter'>
<div class='doors'>
<div class="door1 door">  
</div><div class="door2 door">  
</div>
</div>
</div>
</div>

这是最初的答案，并没有解决问题，但留在这里是关于宽度计算/边界等的提醒。我认为需要稍微改变位置是因为你在一些元素上有一个边框集(1px宽度(——它们的宽度(在默认设置下(会改变元素的整体宽度和高度。

幸运的是，如果我们设置：，我们可以在CSS中绕过这一点

* {
box-sizing: border-box;
}

任何填充或边框现在都将包含在元素的宽度中。

我不确定是否需要设置浏览器用户代理可能引入的任何设置，但为了安全起见，值得将此设置放在CSS的顶部。

* {
margin: 0;
padding: 0;
}