canva画图 图片居中裁剪_css 居中裁剪图片、背景图片

对于用户传的图片，或许没有按照要求的规格传，我们有时候会有按我们需要的规格展示的必要，这时候会为了美观裁剪，最科学的裁剪是居中裁剪。

通常我们会借助第三方插件裁剪，这时是真的将图片裁剪了才存储的。而css的“裁剪”只是展示时的选择性区域处理，并没有真正的裁剪原图片。

背景图片展示

CSS

i.icon.contactsLogo{

width: 100px;

height: 100px;

-webkit-transition-duration: 300ms;

transition-duration: 300ms;

background-position: center center;

background-size: cover;

background-repeat: no-repeat;

background-image: url('http://www.huiyouxing.com/image/meeting.png');

display: inline-block;

vertical-align: middle;

}

html

图片展示

这个有缺陷，你得先知道你的图片是横屏还是竖屏模型(width>height还是width

CSS:

.thumbnail {

position: relative;

width: 200px;

height: 200px;

overflow: hidden;

}

.thumbnail img {

position: a