css - 在 div 中居中图像，两个轴

Question

我正在尝试使图片适合 div 框。但是，我需要对齐它，使图片的 center 实际上位于 div 的中心。图片的尺寸各不相同。

在下面的示例中，我首先需要使用 max-width: 100% 调整宽度以适合图片。但是，现在 Y 轴不居中(图片的底部被切掉，而不是 half bottom half top)。

我怎样才能像下图那样居中？

Answer 1

如果您愿意让图片成为 background-image 而不是实际的 img 元素，那么以下应该可行:

 #imagediv { 
   background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
   background-size: cover;
  }