Vue项目中实现不同图片实现等比展示

# 前言

前几天遇到一个坑的问题：

1. 如按UI给的尺寸固定图片宽高，因网站管理员不安规定上传图片，则显示图片变形。
2. 如不按UI的尺寸，防止图片变形，只固定宽，高自适应，则图片虽不变形，但会显示的高低不齐，很不美观。

这时就在想，有没有一个办法：可以按UI尺寸展示，还不变形的方法？？？
突然灵光一现，被我就这么实现了，哈哈哈

# 先看两组效果

1.如按UI给的尺寸固定图片宽高

1642667936(1).png
如上图：可以看到墨绿色的 01 02 05 已经是变行的了

2. 如不按UI的尺寸，防止图片变形，只固定宽，高自适应

   
   1642668056(1).png
   

   如上图: 高低不齐很不美观

有没有一种办法，都按黄色数字1的宽高的区域展示，如显示区域就是40*70，超出这个区域的就自动缩放。
答案是肯定的，接下来就让我们见证奇迹。

# 使用 p 标签作为图片展示区域

这里我们不再使用img标签来展示图片，而使用p标签的background属性来显示图片。

css

p{
  background: url('图片地址') no-repeat center;
}

# 固定 p 标签的宽高

即按UI尺寸固定展示，假设UI尺寸为40 * 70;

css

p{
  width: 40px;  
  height: 70px;
  border: 1px solid #aaa;
  background: url('图片地址') no-repeat center;
}

1642669909(1).png

# 最重要的一步

设置p标签的background-size属性，宽度100%，高度自适应。

css

p{
  width: 40px;  
  height: 70px;
  border: 1px solid #aaa;
  background: url('图片地址') no-repeat center;
  background-size: 100% auto !important ;
}

效果图如下：

1642670168(1).png

如果设置background-size都为100%，则就像img标签固定宽度一样，效果图如下：

1642670298(1).png

如果不设置background-size则效果图如下：

1642670143(1).png