div中的中心图像,隐藏溢出

Question

我有一个400px的图像和一个较小的div(宽度并不总是300px,如我的例子).我想将图像居中在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/

Answer 2

以上解决方案都不适合我.我需要一个动态图像大小来适应圆形父容器overflow:hidden

.circle-container {
    width:100px;
    height:100px;
    text-align:center;
    border-radius:50%;
    overflow:hidden;
}

.circle-img img {
  min-width:100px;
  max-width:none;
  height:100px;
  margin:0 -100%;
}

这里的工作示例:http: //codepen.io/simgooder/pen/yNmXer

Answer 3

最新的解决方案：

HTML

<div class="parent">
    <img src="image.jpg" height="600" width="600"/>
</div>

CSS

.parent {
    width: 200px;
    height: 200px;
    overflow: hidden;
    /* Magic */
    display: flex;
    align-items: center; /* vertical */
    justify-content: center; /* horizontal */
}

Answer 4

找到了MELISSA PENTA 这个不错的解决方案

的HTML

<div class="wrapper">
   <img src="image.jpg" />
</div>

的CSS

div.wrapper {
  height:200px;
  line-height:200px;
  overflow:hidden;
  text-align:center;
  width:200px;
}
div.wrapper img {
  margin:-100%;
}

将div中任何尺寸的图像居中
与圆形包装纸和不同尺寸的图像一起使用。

的CSS

.item-image {
    border: 5px solid #ccc;
    border-radius: 100%;
    margin: 0 auto;
    height: 200px;
    width: 200px;
    overflow: hidden;
    text-align: center;
}
.item-image img {
    height: 200px;    
    margin: -100%;
    max-width: none;
    width: auto;    
}

Codepen的工作示例

Answer 5

对我来说 flex-box 可以完美地将图像居中。

这是我的 html 代码：

<div class="img-wrapper">
  <img src="..." >
</div>

这是我用于 css 的：我希望图像与包装元素的宽度相同，但是如果高度大于包装元素的高度，则应该“裁剪”/不显示。

.img-wrapper{
  width: 100%;
  height: 50%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
}
img {
  height: auto;
  width: 100%;
}