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

有几种方法可以做到 - 纯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 2

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

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

Answer 3

所以，我发现了一些完全符合我想要的东西：http://jsfiddle.net/fmwzT/

问题是它只适用于bootstrap的最新版本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的neweste 2.3.1版本，这不起作用。

我会发一个问题，看看是否有人知道！

垂直中心响应图像

3 个答案:

更新回答

旧答案