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

Question

我有一个带有 header 图片的响应式设计，它被放置在一个容器中。图像有 width:100%; 和 height:auto;，因此它会随着视口的扩大而变大。我不想超过某个高度，所以容器有 max-height。图像仍在增长，但现在底部被切断了，因为它与容器的顶部对齐。

我希望图像在其容器中保持垂直居中，以便图像的部分在顶部和底部被切掉。结果应如下所示：

header 图片是由用户上传的，因此它们的高度可能不同，因此我无法使用特定的 pixel-values。是否有 CSS-solution 或我必须使用 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.

Answer 1

您可以对图像使用绝对定位、负 top/bottom 值和 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>

Answer 2

不久前只有 javascript 方法可以做到这一点，但现在我们有了一些 css 规则：object-fit 和 object-position

它们的工作方式就像背景大小规则涵盖和包含：

.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

编辑：请注意，您需要声明图像的宽度和高度，否则它将不起作用。

Answer 3

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

Answer 4

这样试试：Demo

如果图像尺寸小，它将在垂直中间排列，如果图像尺寸大，它将适合方框。

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

希望这就是你想要的！

Answer 5

在您想要居中的元素上。

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

在其父级上。

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

使用 polyfill 呈现跨浏览器样式。

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

Vertically center image when image is higher than container

html

css

vertical-alignment