HTML里的图片高度固定，宽度自适应

需求：图片的高度固定，宽度需自适应，保证图片在缩小的情况下不失帧

效果图：

 

 1.HTML

 <div class="img" 
      :style="{backgroundImage:'url('+item.chainImage+')',backgroundSize:'contain',
      backgroundRepeat:'no-repeat'}">
</div>

注：background-size：contain; // 缩小图片来适应元素的尺寸（保持像素的长宽比），是图片宽高最长的那个边覆盖元素一边即可； 

2.CSS

 .img {
        height: 22px;
      }