将图像居中在div中，两个轴

Question

我正在尝试将照片放在div框中。但是，我需要对齐它，以便 center om图片实际上位于div的中心。图片的尺寸各不相同。

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

如何在下图中居中显示？

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;
  }

Answer 2

你去：

.container {
    background-image : url('http://khongthe.com/wallpapers/people/cute-face-218642.jpg'); /* put your image here */
    width: 420px; /* as you want */
    height: 420px; /* as you want */
    background-position: center center;
    background-repeat: no-repeat;
    /*background-size : cover;*/ /*bonus*/
}

并使用此html：

<div class="container"></div>

JsFiddle example

这是一个经典问题。我很确定你可以在Google上找到它。享受我的代码片段。