css - 为什么推特要实现这样的全屏图像

Question

在twitter的首页有一个全屏的图片，在源代码中，他们是这样做的:

HTML:

<div class="front-bg">
<img class="front-image" src="xxx.jpg">
</div>

CSS:

.front-bg {
position: fixed;
width: 200%;
height: 200%;
left: -50%;
}
.front-bg img {
margin: auto;
min-width: 50%;
min-height: 50%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

为什么他们将 top/left 属性设置为“.front-bg img”？如果我改变这样的东西:

.front-bg {
position: fixed;
width: 100%;
height: 100%;
}
.front-bg img {
min-width: 100%;
min-height: 100%;
}

它同样有效。为什么他们将宽度设置为 200%？

Answer 1

{ top: 0; left: 0; right: 0; bottom: 0; }

这部分根本没有在桌面上使用，因为这个图像没有设置位置属性，也许它在具有额外媒体查询的不同设备上使用？

我想说 200%/200% 和定位边距背后的原因必须与图像居中的首选方式有关。使用 %100/%100 方案图像将始终左对齐到较小屏幕上浏览器窗口的左边框。通过申请

margin: 0 auto; min-width: 50%;

它们使它与浏览器窗口一样宽并且始终居中。