javascript - 父div宽度100%,图片怎么居中?
PHP中文网
PHP中文网 2017-04-10 15:23:03
0
16
1035

现在宽屏设计常见,为了适应不同的显示器,往往给p一个100%的宽度,下面再写,那么问题来了,这样的图片怎样做到在任何窗口宽度时自动居中显示?

<p class="banner">
    <ul>
        <li>
            <img src="/attached/banner/1.jpg">
        </li>
        <li>
            <img src="/attached/banner/2.jpg">
        </li>
        <li>
            <img src="/attached/banner/3.jpg">
        </li>
    </ul>
</p>

3Q!

PHP中文网
PHP中文网

认证0级讲师

membalas semua(16)
大家讲道理

是垂直并且水平居中把,解决方案需要css + js

简单css的水平垂直居中

还记得当年的固定大小的任意元素垂直居中于父元素吗?




<p id="father"> <p id="son"></p> </p>
#father{
    width:100%;
    height:100%;
    position:relative;//父相对
}

#son{
    width:400px;
    height:200px;

    position:absolute;
    top:50%;
    left:50%;

    /*关键:让点回去*/
    margin-left: -200px;
    margin-top: -100px;
}

复杂的但是原理一样

这里如果son的宽高不固定怎么办?不知道这是不是题主要问的。

css的代码需要去掉margin,然后使用js获取。




<p id="father"> <p id="son"></p> </p>
#father{
    width:100%;
    height:100%;
    position:relative;//父相对
}

#son{
    width:400px;
    height:200px;

    position:absolute;
    top:50%;
    left:50%;

    /*去掉这里,使用js获取
    margin-left: -200px;
    margin-top: -100px;

    */
}

js代码

$(function(){
var height = $("#son").width();
var height = $("#son").height();

$("#son").attr("margin-top",(-height/2)+"px");
$("#son").attr("margin-left",(-width/2)+"px");
});


特别提醒

如果你的son是一个image,您需要延迟执行上面的代码,因为获取到的图片长宽需要等待图片下载完成后再来计算

代码如下




<p id="father"> <img id="son" src="http://XXXX.jpg" /> </p>

css代码不变,js代码如下

$(function(){
  $("#son").on("load",function(){

    /*这里的图片获取长宽不再是这个样子的,需要修改*/
    //var height = $("#son").width();
    //var height = $("#son").height();


    /*请自己查找把。*/
    $("#son").attr("margin-top",(-height/2)+"px");
    $("#son").attr("margin-left",(-width/2)+"px");


    })
});

提示

如果是图片。请自行查找如何获取图片的原始大小

大家讲道理

方法1, img中设置样式 <img src="xxx" style="display: block; margin: 0px auto; vertical-align: middle;">
方法2, p中设置样式 <p style="text-align:center;">
... 其实有很多种方法

PHPzhong

补充一点 不需要给元素设置宽度100% 默认块级元素就是100%的

左手右手慢动作

去看看张鑫旭大神博客,有各种居中。w3cplus上也有各种居中文章。

大家讲道理

p 用 text-align:center;
然后img用 margin:0 auto;注意的是后面那个auto,前面那个0自定义

阿神

绝对定位left:50%
然后再用margin-left图片宽度的一半

伊谢尔伦

为什么一定是图片,而不是作为背景图片呢,作为背景图片的话,background-position:center;就解决了啊……

如果你是要做很多动画效果的话,那就再议了,或许也可以用背景图片的方式,就是看其他动画的元素怎么去定义位置了。

巴扎黑
<p>
    <img src="" />
</p>

CSS

p{
    position:relative;
    width:100%;
}
p img{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    max-width:100%;
}

或许你可以试试这样子写

Ty80

给p加上text-align:center 不是就可以居中了吗

伊谢尔伦

盒模型 so easy

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan