垂直居中响应图像

Question

我想知道是否有一种简单的方法可以将响应式图像垂直居中。

请参考以下jsFiddle：http://jsfiddle.net/persianturtle/yawTb/1/

基本 HTML：

<img class="mobile-title-size" src="http://zx85.dyndns.org/raphtest/img/title.png" alt="Logo">

基本 CSS：

.mobile-title-size {
position: absolute;
top: 2.5%;
left: 6%;
width: 70%;
max-width: 300px;

}

这是使用在平板电脑和桌面视口上显示的相同图像的移动标题。由于图像已经被加载，我希望使用相同的图像，将其缩小并垂直对齐，以便我可以将一个图像用于所有视口。

问题：在浏览器调整大小时，图像确实变小了，但它没有垂直居中对齐。

目标：尽管在本例中宽度重叠严重，但在我的网站上这不是问题。目标只是在浏览器调整大小时使图像垂直居中。

我可以使用 javascript/jQuery 解决方案，但当然首选简单的 CSS。

非常感谢任何帮助！

Answer 1

您拥有的解决方案适用于旧浏览器，但在不久的将来（目前大约有 80% 的浏览器支持）您可以做到这一点，这是一个更简单、更优雅的解决方案：

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

Answer 2

有几种方法可以做到这一点 - 纯粹的 CSS 或基于 JS 的方法。

---

更新答案

更新：随着 CSS 变换支持的出现，这里有一个使用纯 CSS 定位元素的相当优雅的解决方案。使用给定的标记：

<div class="container">
    <img src="..." alt="..." title="..." />
</div>

对于您的 CSS：

.container {
    /* The container has to have a predefined dimension though */
    position: relative;
}
.container img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Updated JSFiddle

---

旧答案

对于 CSS，您可以在 <img> 元素的容器内构造一个 ghost 元素。 Chris Coyier 做了an excellent write up on this technique。假设您的 HTML 代码如下所示：

<div class="container">
    <img src="..." alt="..." title="..." />
</div>

那么你的 CSS 将是：

.container {
    font-size: 0;
    text-align: center;
}
.container:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.container > img {
    display: inline-block;
    vertical-align: middle;
}

在这个小提琴中可以看到功能性 CSS 修复 - http://jsfiddle.net/teddyrised/yawTb/8/

或者，您可以使用基于 JS 的方法：

$(document).ready(function() {
    $(window).resize(function() {
        $(".container > img").each(function() {
            var cHeight = $(this).parent(".container").height(),
                cWidth = $(this).parent(".container").width(),
                iHeight = $(this).height(),
                iWidth = $(this).width();

            $(this).css({
                top: 0.5*(cHeight - iHeight),
                left: 0.5*(cWidth - iWidth)
            });
        });
    }).resize();  // Fires resize event when document is first loaded
});

但您必须使用以下 CSS：

.container {
    position: relative;
}
.container img {
    position: absolute;
    z-index: 100;
}

[编辑]：对于绝对定位图像元素的基于 JS 的方法，您必须明确说明 .container 元素的尺寸，或者在其中包含一些内容（但这有点违背目的因为图像将在内容之上）。这是因为图像元素已从文档流中取出，因此其尺寸不会影响父容器的大小。

JS 版本的工作示例在这里 - http://jsfiddle.net/teddyrised/yawTb/7/

Answer 3

所以，我找到了完全符合我要求的东西：http://jsfiddle.net/fmwzT/

问题是它只适用于引导程序的最新版本 2.3.1，我不知道为什么（我的网站上有 2.3.0）。

所以现在我已经回答了我的问题并提出了一个更大的问题，是什么导致它起作用？

注意，它确实使用以下代码：

HTML

<div id="f1"><div id="outer-element"><img id="inner-element" src="http://zx85.dyndns.org/raphtest/img/title.png" alt="Logo"></div></div>

CSS

#fl {
    float: left;
}

#outer-element {
    display: table-cell;
    vertical-align: middle;
    height: 40px;
    max-width: 300px;
}

#inner-element {
    display: inline-block;
    margin-left: -20px;
}

注意：如果没有 Bootstrap 的最新 2.3.1 版本，这将不起作用。

我会发布一个问题，看看有没有人知道！