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

【问题标题】：Vertically center image when image is higher than container当图像高于容器时垂直居中图像
【发布时间】：2015-07-19 08:06:42
【问题描述】：

我有一个响应式设计，其中包含一个放置在容器中的标题图像。该图像具有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。

【问题讨论】：

你想要这样jsfiddle.net/ghygpw8t/2吗？
@amit：感谢您的回答，但这不是我想要的。图片应始终填充完整的包装区域，但左侧或右侧没有空白。
除了将图像作为背景图像之外，我想不出任何办法，但我认为这不是你的选择
你是这样的吗？ jsfiddle.net/ghygpw8t/6
@Suresh Ponnukalai：感谢您的回答，但图片应始终填充完整的包装区域，但左侧或右侧没有空白。

标签： html css vertical-alignment

【解决方案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>

【讨论】：

谢谢，但在这种情况下，容器始终保持 200 像素高。随着图像越来越小，我希望它缩小。
@zorkmedia 好的，我修改了答案并使用填充技术来保持容器元素的纵横比，这样容器会根据其宽度改变其高度。
再次感谢，我永远不会想到只有填充。但我会采用您的第一个解决方案，并在我的 css 中添加一些断点来调整容器的高度。
@zorkmedia 很高兴，您还可以查看这篇文章以了解有关填充技术的更多信息stackoverflow.com/questions/1495407/…
另一个最爱 - 知识渊博。

【解决方案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

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

【讨论】：

谢谢，我以前从未听说过对象拟合。现在我确实必须支持 IE，但我会记住这一点以备不时之需。
是的，这是一个很棒的功能，我们希望微软为 Edge 实现它！几周前我很惊讶地发现了这一点，因为所有其他解决方案看起来都很脏。
请注意，父项也必须设置一个高度。当只使用max-height 时，我无法让它工作。

【解决方案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/

【讨论】：

感谢您的回答 - 这几乎就是我要搜索的内容，但容器必须保持 200 像素高。随着图像越来越小，我想缩小它。
容器保持 200px 高度...我不明白这个问题
当图像高度小于 200px 时，我希望容器变小。这就是我将容器的高度设置为自动的原因。在您的解决方案中，容器始终为 200px 高 - 因此图像上方和下方都会有空白。同时我意识到我的问题没有完美的 CSS 解决方案，所以你的解决方案非常接近非常接近并且投票赞成。再次感谢。

【解决方案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;
}

希望这是你想要的！

【讨论】：

【解决方案5】：

在你想要居中的元素上。

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

在其父级上。

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

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

【讨论】：