图片按自身比例缩放居中

2018-06-15 阅读量

页面加载图片的时候为了防止图片缩放变形，采用div的背景图来加载图片，用法和image一样

1	<div class="zoomImage" style="background-image:url(../../public/img/20170120175934785.png)"></div>

.zoomImage{
    width:100%;
    height:0;
    padding-bottom: 100%;
    overflow:hidden;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    background-size:cover;
}

原理：

width:100%;
height:0;
padding-bottom: 100%;
overflow:hidden;

虽然height：0；高度为0，但是它的padding值为100%
就实现了div以1：1的大小呈现

jsonContent: meta: false pages: false posts: title: true date: true path: true text: false raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true