css - 水平居中图像，动态宽度，溢出隐藏父级

Question

我有一个高度可变的父 div。内部是一个必须是其父级高度的 100% 的图像。

我可以像这样在 css 中很容易地实现这一点：

.parent {
    width: 640px;
    min-height: 560px;
    height: 100%;
    overflow: hidden;
}
.parent img {
    min-height: 560px;
    height: 100%;
    width: auto;
}

唯一的问题是 img 总是左对齐。我如何将它集中在它的父级中？

如果我使用背景图像，图像将不会调整大小以适应父级的总高度。我不想使用 css3 background-size 属性，因为它在 ie7 和 8 中缺乏支持。

关于 stackoverflow 有一些与此相关的问题，但没有一个（我能找到）解决与可变宽度和高度图像相关的问题。

Answer 1

我知道这有点晚了，但是由于这个问题还没有答案，我将把我的解决方案放在这里，以帮助任何为此苦苦挣扎的人。

您将需要 2 个父 div 来实现这一点，基本上内部 div 的宽度将大于其中任何可能的图像。我们在外部 div 内水平居中，这样我们可以使用 text-align: center 来对齐图像。

.mask {
  width: 400px;
  overflow: hidden;
  height: 400px;
  position: relative;
}
.imgctn {
  position: absolute;
  width: 1000px;
  left: 50%;
  margin-left: -500px;
  text-align: center;
  height: 100%;
}
.imgctn img {
  height: 100%;
}

<div class="mask">
  <div class="imgctn">
    <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />
  </div>
</div>

希望这可以帮助。

Answer 2

使用文本对齐：中心；会成功的：

.parent {
   text-align: center;
   width: 640px;
   min-height: 560px;
   height: 100%;
   overflow: hidden;
}

.parent img {
   min-height: 560px;
   height: 100%;
   width: auto;
}