Fork me on GitHub

未知宽高图片的水平垂直居中

发表于 | 分类于
字数统计: 484 | 阅读时长 ≈ 2
未知宽高图片的水平垂直居中

背景图片居中

原理：
使用一个透明的gif图片做覆盖层，高宽拉伸至所需要的大小，然后给这个gif图片一个background-position:center center的属性。而background-image建议写在页面上，因为实际项目中，这肯定是个动态的URL地址，css文件似乎不支持动态URL地址。

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>
    <head>
        <style>
#box{
    width:600px;
    height:600px;
    background: black;
    border:1px solid #d3d3d3;
}
#box img {
    background-repeat: no-repeat;
    background-position: center;
    background-attachment:fixed;
    width:100%;
    height:100%;
    border: 1px solid #d3d3d3;
}
        </style>
    </head>
    <body>
        <div id="box">
            <img src="img/pixel.png" alt="" style="background-image:url(img/panda.jpg);" />
        </div>
        <div id="box">
            <img src="img/pixel.jif" alt="" style="background-image:url(img/Jackma.jpg);" />
        </div>
    </body>
</html>

pixel.gif和pixel.png都是300px*300px的透明图片。经过测试png和gif两种类型其实都可以，究竟哪种类型我觉得看需求，用png的话可以更好的支持半透明的效果。（个人观点）
这里写图片描述
（注意这里一定得是透明的图片，因为它是覆盖在你要显示的图片上）

设置box的宽高都是600px，为了更好的显示加了一个背景颜色和边框。box底下的img给设了一个宽高100%，目的是把透明图片铺满box。

利用background-position中有个center属性。可以完美实现居中。别忘了background-repeat: no-repeat;

background-position 属性设置背景图像的起始位置。

提示：需要把 background-attachment 属性设置为 “fixed”，才能保证该属性在 Firefox 和 Opera 中正常工作。

最终效果：
这里写图片描述

这样直接操作html中的url地址就可以不用考虑该图片的宽高实现水平垂直居中。

思考：

1
2
3
4
5
6
7
8
9
10
/* 省略一部分 */
#box div {
    background-repeat: no-repeat;
    background-position: center ;
    width:100%;
    height:100%;
    border: 1px solid #d3d3d3;
}
<div style="background-image:url(img/panda.jpg);" />

其实不用img搞一个透明图片覆盖也可以这样实现垂直水平居中的，用透明图层覆盖的话会便于维护一些。

undefined