码迷,mamicode.com
首页 > 其他好文 > 详细

图片居中完美方案

时间:2016-01-13 15:49:26      阅读:155      评论: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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!