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>

希望这对您有所帮助。