css - 在 DIV 中居中图像并 overflow hidden

Question

这是一个独特的案例。我正在努力实现以下目标:

1. 方形图片应为 100% 100%。基本上填满整个DIV(平方)
2. 所有图片都应填满 DIV 的整个高度。
3. 所有图片都应该居中对齐
4. 如果他们溢出X轴，他们应该溢出并隐藏

https://jsfiddle.net/cxnyLxfn/2/

.image-container {
    position: relative;
    width: 300px;
    height: 300px;
    display: inline-block;
    margin: 20px;
    border: 1px solid black;
    float: left;
    overflow: hidden;
}

.image-container img {
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

我几乎做到了这一点，除了无论如何都将图像居中。谷歌标志应该居中，其余的看起来很好。如何实现我的四个要求？

Answer 1

我通常对此使用灵活的方法:

.image-container {
  display: flex;
  width: 300px;
  height: 300px;
  border: 1px solid black;
  overflow: hidden;
  position: relative;
  align-items: center;
  justify-content: center;
}

img {
  display: block;
  height: 100%;
}

<div class="image-container">
  <img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png" />
</div>
<div class="image-container">
  <img src="https://i.kinja-img.com/gawker-media/image/upload/s--pEKSmwzm--/c_scale,fl_progressive,q_80,w_800/1414228815325188681.jpg" />
</div>
<div class="image-container">
  <img src="http://www.zevendesign.com/wp-content/uploads/2015/04/google-logo-progress-270x480.jpg" />
</div>
<div class="image-container">
  <img src="https://cdn.pixabay.com/photo/2015/10/31/12/56/google-1015752_960_720.png" />
</div>