不同尺寸图片的按照规定尺寸统一不变形展示

1、类比微信朋友圈图片展示效果，不同宽高的图片均以规定的正方形尺寸不变形展示，可适当截取部分（宽高自动截取）

html:

<div> <img src=""> </div>

css:

div{

    width: 100px;

    height: 100px;

}

img{

   width: 100%;

   height: 100%;

   -o-object-fit: cover;

   object-fit: cover;

}

 

2、不同尺寸的图片作为相同高度、宽度自适应的背景图片展示，宽度可部分截取

vue举例：

html:

<div :style="{'background-image': 'url('+url+')'}"></div>

css:

div{

     background-size: auto 100px;

     background-position: center;

     background-repeat: no-repeat;

}

3、不同尺寸的图片作为相同宽度、高度自适应的背景图片展示，高度可部分截取

vue举例：

html:

<div :style="{'background-image': 'url('+url+')'}"></div>

css:

div{

     background-size: 100px auto;

     background-position: center;

     background-repeat: no-repeat;

}