响应式图片垂直居中

Question

响应式图片垂直居中

jquerycsstwitter-bootstrapresponsive-design

8

我想知道是否有一种简单的方法来垂直居中一个响应式图片。

请参考以下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更受欢迎。

非常感谢您的任何帮助！

- Raphael Rafatpanah

2

垂直对齐的基础：容器使用position:relative，图像使用position:absolute。然后添加固定高度和top:50%; margin-top:-height/2。最后根据不同的媒体查询进行调整。 - elclanrs

如果图像是响应式的，我该如何添加固定高度？ - Raphael Rafatpanah

你需要使用JS来完成这个任务。 - Terry

谢谢，现在要找一个简单而且写得好的可行答案！=) - Raphael Rafatpanah

@elclanrs，我在尝试使用你的解决方案时遇到了问题。请看一下这个jsFiddle... http://jsfiddle.net/persianturtle/yawTb/6/ 即使我指定了高度，图像仍然无法垂直对齐。感谢您的帮助！ - Raphael Rafatpanah

显示剩余2条评论

3个回答

2

您现有的解决方案适用于旧版浏览器，但在不久的将来（目前约占80％的浏览器支持率），您可以使用更简单、更优雅的解决方案：

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

- Vandervals

0

所以，我找到了一些完全符合我的要求的东西：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最新的2.3.1版本才能正常运行。

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

- Raphael Rafatpanah

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Terry · Accepted Answer

有几种方法可以做到这一点 - 纯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%);
}

更新后的JSFiddle

旧回答

对于CSS，您可以在<img>元素的容器中构建一个幽灵元素。Chris Coyier在这个技术方案上写了一篇很好的文章。假设你的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/