大小不一样的图片随着盒子大小自适应

前提：vue+iview做后台管理系统

需求：页面一行有固定的4张卡片，每张卡片里有图片，图片是从后台系统中上传的，大小不固定，要卡片中的图片高度随着屏幕大小自适应

小屏幕效果：

大屏幕效果：

解决方法有两种：

1. 利用@media媒体查询做。

① 在index.html中加入meta标签 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

② 在当前页面中给图片对应盒子在不同屏幕尺寸下给不同的高度

2. 用原生js的方法，获取到当前卡片的宽度，当改变屏幕大小时用获取到的宽度根据设计图乘以一个宽高比例（美观好看就行），最后把计算得到的值动态设置高度样式

data数据：

注意：这里需要注意的是设好后，有时候拖动屏幕改变大小时会报错或者不会实时变化，要把结构里渲染卡片的数组对象，初始化时就要设成数组对象形式[{}]，因为在页面初始化时可能没有数据，所以页面渲染时获取不到dom结构

结构：

方法和钩子函数：