剪切父div中的CSS中心图像

时间:2013-06-27 07:53:35

标签: css

如何将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是可以接受的。

3 个答案:

答案 0 :(得分:13)

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

答案 1 :(得分:1)

您好,请查看example

它解决了你的问题

HTML

<div class='wrapper'>
    <img  border="3"/>
</div>

CSS

.wrapper {
   /*position: absolute;*/
   /* position details here */
   overflow: hidden;
   text-align:center
}
.wrapper img {
  height: 100%;
}

答案 2 :(得分:0)

尝试添加

display:block;
margin:0px auto;

到“.wrapper img”