当图像高于容器时垂直居中图像

Question

我有一个响应式设计的标题图片，它放在一个容器中。图像具有width:100％;和height:auto;属性，因此随着您增大视口而变大。但是我不想超过某个高度，所以容器具有max-height属性。现在图像仍然会变大，但底部部分被剪切了，因为它对齐到容器的顶部。

我希望图像在其容器中保持垂直居中，因此图像的顶部和底部部分都被裁剪掉。最终效果应该是这样的：

由于标题图像是由用户上传的，因此它们可能具有不同的高度，因此我不能使用特定的像素值来解决问题。是否有CSS解决方案，还是必须使用JavaScript？

以下是代码：

.wrapper {
  width: 90%;
  max-width: 600px;
  margin: 1em auto;
  background-color: #E9ADAD;
}
.container {
  text-align: center;
  height: auto;
  line-height: 200px;
  max-height: 200px;
  overflow: hidden;
}
img {
  width: 100%;
  height: auto !important;
  vertical-align: middle;
}

<div class="wrapper">
  <div class="container">
    <img src="http://placehold.it/600x300/C00000/FFFFFF&text=Image+vertically+centered">
  </div>
</div>

我准备了一个fiddle。

- zork media

---

你想要这样的吗？http://jsfiddle.net/ghygpw8t/2/？ - G.L.P

@amit：谢谢你的回答，但那不是我想要的。图片应该始终填满完整的包装区域，但左右不能有空白。 - zork media

我想不出其他办法，只能将图像作为背景图像，但我认为这对你来说不是一个选项。 - sdvnksv

你是不是在寻找这样的东西？http://jsfiddle.net/ghygpw8t/6/ - Suresh Ponnukalai

@Suresh Ponnukalai：感谢您的回答，但图片应始终填满整个包装区域，但左右不留空白。 - zork media

Answer 1

您可以使用绝对定位来处理图像，负的上下值和margin:auto;以使图像在容器中垂直居中：

.wrapper {
  width: 90%;
  max-width: 600px;
  margin: 1em auto;
  background-color: #E9ADAD;
  max-height: 200px;
}
.container {
  position:relative;
  padding-bottom:40%;
  overflow: hidden;
}
img {
  position:absolute;
  top:-50%; bottom:-50%;
  margin:auto;
  width: 100%;
  height: auto;
}

<div class="wrapper">
  <div class="container">
    <img src="http://placehold.it/600x300/C00000/FFFFFF&text=Image+vertically+centered">
  </div>
</div>

- web-tiki

---

谢谢，但在这种情况下容器始终保持200px高。我希望随着图像变小而缩小它。 - zork media

@zorkmedia 好的，我修改了我的答案并使用填充技术来保持容器元素的纵横比，这样容器的高度会根据其宽度而改变。 - web-tiki

再次感谢，如果没有填充的想法，我永远不会有这个想法。但我会采用您的第一个解决方案，并在我的CSS中添加一些断点来调整容器的高度。 - zork media

@zorkmedia 不客气，您还可以查看此帖子以了解有关填充技术的更多信息 https://dev59.com/u3I_5IYBdhLWcg3wK_zE - web-tiki

另一个喜爱 - 伟大的知识。 - zork media

为了让它正常工作，我只需要注释或删除 bottom:-50%; 这一行代码。否则，完美！ - AlexLaforge

Answer 2

不久之前，只有一种JavaScript方法可以实现此功能，但现在我们有了一些CSS规则：object-fit和object-position。

它们的工作方式与背景大小规则cover和contain相同：

.container img{
  width: 100%;
  height: auto;
}
@supports(object-fit: cover){
    .container img{
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }
}

这种方法的问题在于它非常新，而且目前还不能在IE或Edge上使用。 这里有一个示例: http://codepen.io/vandervals/pen/MwKKrm 编辑：请注意，您需要声明图像的宽度和高度，否则它将无法正常工作。

- Vandervals

---

谢谢，我以前从未听说过object-fit。现在我必须支持IE，但我会记住这个方法以备将来使用。 - zork media

是的，这是一个很棒的功能，我们希望微软能够在Edge中实现它！我很惊讶地发现这个功能只是几周前，因为所有其他解决方案看起来都很糟糕。 - Vandervals

请注意，父级元素 也必须设置高度。仅使用 max-height 时，我无法使其正常工作。 - Bram Vanroy

Answer 3

尝试像这样：演示 如果图像大小较小，则将其排列在垂直中心，如果其大小较大，则将其适应框中。

CSS：

 .wrapper {
    width: 90%;
    max-width: 600px;
    margin: 1em auto;
}
.container {
    text-align: center;
    line-height: 200px;
    overflow: hidden;
    background-color:#ccc;
    vertical-align:middle;
    height: 200px;
    border:2px solid green;
    display: flex;
    width: 100%; 
    align-items: center;
    justify-content: center;
}
img {
    width: 100%;  
    max-height: 196px;
    border:2px solid red;    
    vertical-align: middle;
     line-height: 196px;
}

希望这就是您想要的！

- G.L.P

Answer 4

.wrapper {
    width: 90%;
    max-width: 600px;
    margin: 1em auto;
}
.container {
    height: 200px;
    overflow: hidden;
}
.imgWrapper {
    position: relative; 
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
}
img {
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto;
    height: auto;
    width: 50%;
}

<div class="wrapper">
    <div class="container">
        <div class="imgWrapper"><img src="http://placehold.it/600x300"></div>
    </div>
</div>

http://jsfiddle.net/ghygpw8t/5/

受https://css-tricks.com/perfect-full-page-background-image/启发

- Hal-9000

---

谢谢您的回答 - 这几乎是我正在寻找的，但容器必须保持200像素高。我希望随着图像变小而缩小它。 - zork media

容器保持200像素的高度...我不明白问题在哪里。 - Hal-9000

我希望当图像高度小于200px时，容器变小。这就是为什么我将容器的高度设置为自动的原因。在你的解决方案中，容器总是200像素高 - 因此图像上方和下方会有空白。同时我意识到没有完美的CSS解决方案来解决我的问题，所以你的解决方案非常接近并且我给予赞同。再次感谢。 - zork media

Answer 5

在你想要居中的元素上。

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

在其父元素上。

.parent { transform-style: preserve-3d; }

使用polyfill来渲染跨浏览器样式。

- Cozzbie