首页 文章

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

提问于
浏览 次
2

我有一个父级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的一些问题与此相关，但它们（我能找到）都没有解决与可变宽度和高度图像有关的问题 .

css

2 回答

  • 0

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

    你将需要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>

    希望这可以帮助 .

    回复于
  • 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;
}
    回复于

相关问题