vue中如何获取图片最大正方形区域？

Question

<img class="previewer-demo-img" v-for="(src11,i) of item.images"  :src="src11" alt="" :key="i">

因为想呈现微信朋友圈九宫格式的图片展示，但是原始图片大小不一，所以获取图片正中的一块区域，做缩略图，点击之后再展示原始图。

请教！

、、、、、、、、、、、、、补充、、、、、、、、、、、、、、、、、、

  .bg{
      font-size:30px;
      background-color:#cccccc;
      background-size:cover;
      width: 200px;
      height:200px;
      overflow:hidden;
   }
<div class="bg" style="background: url('../common/image/normal-head.png') no-repeat center;"></div>


图片路径确定是正确的，因为<img src是可以的，但是还是图片显示不出来。

Answer 1

这样的话建议用背景图的方式，限制div的大小，设置背景图的position

Answer 2

楼上说的背景图的方案，我也比较推荐

img的话，max-width和max-height让图片不变形