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

背景图片居中

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

示例代码

<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的话可以更好的支持半透明的效果。(个人观点)
未知宽高图片的水平垂直居中_第1张图片
(注意这里一定得是透明的图片,因为它是覆盖在你要显示的图片上)

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

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

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

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

最终效果
未知宽高图片的水平垂直居中_第2张图片

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

思考

/* 省略一部分 */
#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搞一个透明图片覆盖也可以这样实现垂直水平居中的,用透明图层覆盖的话会便于维护一些。

你可能感兴趣的:(html)