Technique in practice (works fine):
实践中的技术(效果良好):
http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css (first example in article)
http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-center -css(文章的第一个例子)
Results differ:
结果不同:
Chrome/Safari 'scale' a 100% width / height auto image using this technique from the vertical center within a 'mask' div with a fixed height of 300px and width of 100%. So when you increase the width of the container element, the image gets cropped equally on the top and bottom as it scales down, but the left and right edges 'stick' to the container (no horizontal cropping).
Chrome/Safari 'scale'是一个100%宽度/高度的自动图像，使用这种技术，从垂直中心到一个'mask' div，固定高度为300px，宽度为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;
}
Here's the Fiddle (sorry for the inline code) for you to check out:
这是小提琴(抱歉是内联代码)供您检查:
http://jsfiddle.net/KgJbR/
With Firefox however, the image will 'scale' from an anchor point of the top-left corner, instead of an anchor point of dead-center, causing the image to be cropped only along the bottom. Is this just a low-level difference as to how the two engines work with this method?
然而，在Firefox中，图像将从左上角的一个锚点“缩放”，而不是一个死点的锚点，导致图像只能在底部被裁剪。这仅仅是两个引擎如何使用这个方法的低层次差异吗?
Firefox is on the left, while Safari is on the right in this image. Red borders indicate where the image is being cropped.
Firefox在左边，Safari在右边。红色边框表示图像被裁剪的位置。
1 个解决方案
#1
3
Browsers do handle Absolute Centering a bit differently! While in this case I'd recommend using a background-image instead for better positioning options, you can trick Firefox into centering the image appropriately using top: -100% and bottom: -100%. This forces Firefox to start its calculations for centering outside the container's bounds instead of starting the element at the top and only overflowing out the bottom.
浏览器确实处理绝对的中心有一点不同!虽然在这种情况下，我建议使用背景图像来代替更好的定位选项，但是您可以通过使用top: -100%和bottom: -100%来欺骗Firefox，使其以图像为中心。这迫使Firefox开始计算在容器边界外的中心位置，而不是在顶部启动元素，并且只会溢出底部。
Here's your Fiddle that's been tweaked to fix the issue: http://jsfiddle.net/shshaw/KgJbR/3/
这里是您的小提琴，它被调整来修复这个问题:http://jsfiddle.net/shshaw/KgJbR/3/。
#1
3
Browsers do handle Absolute Centering a bit differently! While in this case I'd recommend using a background-image instead for better positioning options, you can trick Firefox into centering the image appropriately using top: -100% and bottom: -100%. This forces Firefox to start its calculations for centering outside the container's bounds instead of starting the element at the top and only overflowing out the bottom.
浏览器确实处理绝对的中心有一点不同!虽然在这种情况下，我建议使用背景图像来代替更好的定位选项，但是您可以通过使用top: -100%和bottom: -100%来欺骗Firefox，使其以图像为中心。这迫使Firefox开始计算在容器边界外的中心位置，而不是在顶部启动元素，并且只会溢出底部。
Here's your Fiddle that's been tweaked to fix the issue: http://jsfiddle.net/shshaw/KgJbR/3/
这里是您的小提琴，它被调整来修复这个问题:http://jsfiddle.net/shshaw/KgJbR/3/。