图片裁剪居中的两种方式（CSS和JS）

一、JS方式实现：

通过Vue中图片load方法(当然原生JS有对应的img.onload事件)，获取到图片的原始尺寸（img.naturalWidth, img.naturalHeight），然后判断图片是长图还是宽图，如果是长图，则设置图片的宽为100%，高度自适应；反之是宽图，设置图片的高为100%，宽为自适应。当然，如果图片的原始尺寸小于盒子的宽高尺寸，则取图片的原始尺寸。

页面：

JS：

methods: {
    toCenterImage: (e) => {
        let hs, ws,
            img = e.currentTarget,
            w = img.naturalWidth,
            h = img.naturalHeight, 
            parent = img.parentNode,
            pw = parent.offsetWidth,
            ph = parent.offsetHeight;
        w >= h ? (hs = h >= ph ? '100%' : h+'px', ws = 'auto') : (hs = 'auto', ws = w >= pw ? '100%' : w+'px')
        img.style.height = hs
        img.style.width = ws
    }
},

这种方式，不需要再去写img的样式。

二、CSS方式实现：

其实，css实现起来很简单，只需要设置img的样式：object-fit：none即可，不过你要给img一个高度，因为裁剪嘛

页面：（图片可以自己随便截两张来测试）

样式：

.banner {
    width: 375px;
    height: 240px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.banner img {
    width: 100%;
    height: 100%;
    /*object-fit:cover;*/
    object-fit:none; none则不改变图片原始尺寸
}

   object-fit: cover会按照图片原始宽高比对图片进行缩放，无法解决比如宽图片的高度比盒子的高度小，会让图片放大模糊的问题，而none是不改变原始尺寸的，这里我改用了none，满足我的要求。

 【CSS中的object-fit属性知识介绍】：

   它有以下5个可用值，作用如下：

    [   fill ]：被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比，那么该对象将被拉伸以适应。

    [   contain ]：被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。

    [   cover ]：被替换的内容大小保持其宽高比，同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配，该对象将被剪裁以适应。

    [   none ]：被替换的内容尺寸不会被改变。

    [   scale-down ]：内容的尺寸就像是指定了none或contain，取决于哪一个将导致更小的对象尺寸。