Question

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

方形图像应为100％100％。基本上填写整个DIV（平方）
所有图像都应填写DIV的整个高度。
所有图片应对齐中心
如果它们溢出X轴，它们应该溢出并隐藏

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

我几乎实现了这一点，除了无论如何使图像居中。 Google徽标应该居中，其余部分看起来很好。我如何达到我的四项要求？

Answer 1

我通常使用flex方法：

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

Answer 2

为img添加css

img {
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
}

Answer 3

试试这个：

img {
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform:translate(-50%, -50%);
}

Answer 4

使用object fit属性...

fiddle

＆＃13;

.image-container {
  width: 300px;
  height: 300px;
  display: inline-block;
  margin: 20px;
  border: 1px solid black;
  float: left;
}

img {
  object-fit: contain;
  height: 100%;
  width: 100%;
}

＆＃13;

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

＆＃13;

Answer 5

tansform:translate()会发挥魔力。这是一个有效的例子 -

＆＃13;

.image-container {
  position: relative;
  width: 300px;
  height: 300px;
  display: inline-block;
  margin: 20px;
  border: 1px solid black;
  float: left;
  overflow: hidden;
}

img {
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

＆＃13;

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

＆＃13;

DIV中的中心图像并隐藏溢出的

5 个答案: