为什么twitter会实现像这样的全屏图像

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

我认为这是为了考虑具有不同长宽比的不同屏幕，因此无论屏幕是纵向还是横向，图片的中心始终居中，并且边缘有足够的“备用”。