jquery – 垂直中心响应图像

发布时间:2020-02-21 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了jquery – 垂直中心响应图像脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想知道是否有一种简单的方法来垂直居中响应图像.

请参考以下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.

任何帮助是极大的赞赏!

解决方法

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

总结

以上是脚本之家为你收集整理的jquery – 垂直中心响应图像全部内容,希望文章能够帮你解决jquery – 垂直中心响应图像所遇到的程序开发问题。

其他人正在看

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入脚本之家官方QQ群:1065694478
标签: