实践中的技术(效果很好):
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 (很抱歉内联代码)供您查看:
然而,对于 Firefox,图像将从左上角的 anchor “缩放”,而不是死点的 anchor ,导致图像仅沿底部被裁剪。这只是两个引擎如何使用此方法的低级差异吗?
在此图像中,Firefox 位于左侧,而 Safari 位于右侧。红色边框表示图像被裁剪的位置。
最佳答案
浏览器处理绝对居中的方式确实有点不同!虽然在这种情况下我建议使用 background-image
而不是更好的定位选项,但您可以使用 top: -100%
和 底部:-100%
。这会强制 Firefox 开始计算以在容器边界之外居中,而不是从顶部开始计算元素并且只溢出底部。
这是您的 fiddle ,经过调整以解决问题:http://jsfiddle.net/shshaw/KgJbR/3/
关于css - Absolute Vertical Centering Technique with Image - 为什么 Firefox 以不同的方式缩放图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19938114/