css - Absolute Vertical Centering Technique with Image - 为什么 Firefox 以不同的方式缩放图像？

Question

实践中的技术(效果很好):

http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css(文章中的第一个例子)

结果不同:

Chrome/Safari 使用此技术从“ mask ”div 中的垂直中心“缩放”100% 宽度/高度的自动图像，固定高度为 300 像素，宽度为 100%。因此，当您增加容器元素的宽度时，图像在缩小时会在顶部和底部被等量裁剪，但左右边缘“粘”在容器上(没有水平裁剪)。

.container
{
overflow: hidden;
position: relative;
width: 100%;
min-height: 310px;
min-width: 462px;
}

img
{
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
display: block;
width: 100%;
min-height: 310px;
margin: auto;
}

这是 fiddle (很抱歉内联代码)供您查看:

http://jsfiddle.net/KgJbR/

然而，对于 Firefox，图像将从左上角的 anchor “缩放”，而不是死点的 anchor ，导致图像仅沿底部被裁剪。这只是两个引擎如何使用此方法的低级差异吗？

在此图像中，Firefox 位于左侧，而 Safari 位于右侧。红色边框表示图像被裁剪的位置。

Answer 1

浏览器处理绝对居中的方式确实有点不同!虽然在这种情况下我建议使用 background-image 而不是更好的定位选项，但您可以使用 top: -100% 和 底部:-100%。这会强制 Firefox 开始计算以在容器边界之外居中，而不是从顶部开始计算元素并且只溢出底部。

这是您的 fiddle ，经过调整以解决问题:http://jsfiddle.net/shshaw/KgJbR/3/