图片/背景图以中心为点最短边裁切并缩放

目录

背景图以左上角为起点，以最短边等比例裁切/放大

<div class="slideTopImg" :style="{backgroundImage: `url('xxxxx')`}" />

.slideTopImg {
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
      }

背景图中心为起点，最短边等比例裁切/放大

   width: 100%;
   height: 0;
   padding-bottom: 100%;
   background-repeat: no-repeat;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   background-position: center center; /* 剪裁位置，从中心开始 */

图片以中心为起点，最短边等比例裁切/放大

<img class="slideTopImg" :src="item.iconImg" alt="" />

.slideTopImg {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 内容填充模式 */
  object-position: center center; /* 剪裁位置，从中心开始 */
}