7

在 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% 呢？

4

2 回答 2

1

{顶部：0；左：0；右：0；底部：0；}

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

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

边距：0 自动；最小宽度：50%；

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

于 2013-02-22T15:14:20.383 回答
0

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

于 2013-02-22T15:04:21.577 回答