2018-04-10  150 次浏览 评论

图片自适应CSS

 标签:  

HTML部分

<div class="layui-upload-list banner-box">
    <div class="fl banner-logo-box">
        <div class="banner-Img-table">
            <div class="banner-Img-vc">
                <img class="layui-upload-img" id="bannerImg" class="fl" src="">
            </div>
        </div>
    </div>
</div>

CSS部分

//正常边框
.banner-logo-box {
   padding: 1px;
   border: 2px dashed #ddd;
   width: 500px;
   height: 260px;
}
//外层div变表格
.banner-Img-table {
   display: table;
   width: 500px;
   height: 260px;
   overflow: hidden;
}
//内层div变单元格
.banner-Img-vc {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
   width: 500px;
}
//表格内居中属性
.banner-Img-vc img {
   max-width: 500px;
   max-height: 260px;
   text-align: center;
   vertical-align: middle;
}

给我留言

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: