在剪辑的父div中的CSS中心图像 [英] CSS center image in a clipped parent div

问题描述

如何将 img 置于父项 div 标记中，标记设为 overflow：hidden 。也就是说，我想要的是剪辑图像，但剪辑在左/右，所以图像的中间显示。

How can I center an img in a parent div tag which is set to overflow: hidden. That is, what I want is to clip the image but clip on both the left/right so the middle of the image is shown.

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

然后样式如下：

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

-50％

-50% would be the width of the parent, but I want the width of the img itself.

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

Firefox supported CSS is acceptable.

推荐答案

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

使用text-align，line-height，vertical-align和negative margin。 img实际上减少到零，将自己为中心。

use text-align , line-height , vertical-align and negative margin. img virtually reduced to zero, will center itself.

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

这篇关于在剪辑的父div中的CSS中心图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！