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＆amp;中缺乏支持。 8。

关于stackoverflow的一些问题与此相关，但它们（我能找到）都没有解决与可变宽度和放大相关的问题。身高形象。

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

希望这有帮助。

Answer 2

使用 text-align：center; 可以解决问题：

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

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

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

2 个答案: