首页 > 其他 > 详细

图片居中完美方案

时间:2016-01-13 15:47:11      阅读:182      评论:0      收藏:0      [点我收藏+]

HTML代码

<div class="img-contrainer">
            <div class="img-illpart">
                <img src="luck0.jpg" class="show" alt="">
                <img src="luck0.jpg" class="ill" alt="">
            </div>
        </div>

1、设置容器(img-contrainer)样式,并设置图片虚容器(img-illpart)样式

            .img-contrainer{
                width: 400px;
                height: 300px;
                border: 1px solid #cecece;
                margin:20px auto;
                position: relative;
            }

            .img-illpart{
                width: 100%;
                position: absolute;
                left:50%;
                top:50%;
                border:1px solid orange;
            }

            .img-illpart img{
                width: 100%;
            }

样式如下图

技术分享

2、设置img(show)样式,会使样式为show的图片处于容器正中

.img-illpart img.show{
    position: absolute;
    left:-50%;
    top:-50%;
}

样式效果如下

技术分享

 

3、将img(ill)设为不可见,为了方便展示的边框去掉就大功告成了

.img-illpart img.ill{
    visibility: hidden;
}

效果如下图

技术分享

4、看看不能类型的图片效果,有点缺陷就是小图会被拉伸

技术分享

技术分享

图片居中完美方案

原文:http://www.cnblogs.com/winfred4633/p/5127193.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!