剪裁父 div 中的 CSS 中心图像

Question

如何将 img 置于设置为 overflow: hidden 的父 div 标签中。也就是说，我想要的是裁剪图像，但同时裁剪左/右，以便显示图像的中间部分。

<div class='wrapper'>
  <img/>
</div>

然后样式如下:

.wrapper {
  position: absolute;
  /* position details here */
  overflow: hidden;
}
.wrapper img {
  height: 100%;
  margin-left: -??; //what here?
}

-50% 是父级的宽度，但我想要 img 本身的宽度。

Firefox 支持的 CSS 是可以接受的。

Answer 1

http://codepen.io/gcyrillus/pen/BdtEj

使用文本对齐、行高、垂直对齐和负边距。 img 几乎减少到零，将自己居中。

.wrapper {
  width:300px;
  text-align:center;
  line-height:300px;
  height:300px;
  border:solid;
  margin:2em auto;
  overflow:visible; /* let's see what we slice off */
}
img {margin:-100%;vertical-align:middle;

  /* to show whats been cut off */
  position:relative;
  z-index:-1;
}

仅适用于水平方向:

  .wrapper {
      width:300px;
      text-align:center;
      border:solid;
      margin:2em auto;
      overflow:hidden
    }
    img {
      margin:0 -100%;
      vertical-align:middle;
    }