剪切父div中的CSS中心图像

如何将img置于父div标签中,该标签设置为overflow：hidden.也就是说,我想要的是剪辑图像,但在左/右两侧剪辑,以便显示图像的中间部分. <div class='wrapper

... . . 如何将img置于父div标签中,该标签设置为overflow：hidden.也就是说,我想要的是剪辑图像,但在左/右两侧剪辑,以便显示图像的中间部分.

<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是可以接受的.

.

解决方法

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

使用text-align,line-height,vertical-align和negative margin. 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;    }

. . .. ...