html - overflow hidden 的div中的中心图像

Question

我有一个 400 像素的图像和一个较小的 div(宽度并不像我的示例中那样总是 300 像素)。我想让div中的图片居中，如果溢出就隐藏。

注意:我必须保留图像上的 position:absolute。我正在使用 css-transitions，如果我使用 position:relative，我的图像会有点抖动 (https://web.archive.org/web/20120528225923/http://ta6.maxplus.be:8888/)。

jsfiddle http://jsfiddle.net/wjw83/1/

Answer 1

您应该使容器相对并给它一个高度，这样就完成了。

http://jsfiddle.net/jaap/wjw83/4/

.main {
  width: 300px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  height: 200px;
}

img.absolute {
  left: 50%;
  margin-left: -200px;
  position: absolute;
}

<div class="main">
  <img class="absolute" src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />
</div>
<br />
<img src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />

如果您愿意，还可以通过添加负边距和顶部位置来使图像垂直居中:http://jsfiddle.net/jaap/wjw83/5/