scss实现图片宽高比例为4：3，适配不同设备

先说一下需求：如图所示，api传来的图片显示在页面上，实现图片比例为4：3 并适配不同移动设备的横屏竖屏。

实现方法：在scss文件中使用vw，获取屏幕宽度(1vw = 1%)，因为存在padding，所以需要calc()来计算一下，calc()可以计算vw 和 px的混合运算，需要注意的是，运算符的左右两侧必须有空格，否则calc函数将不起作用。
代码如下：

.image{
  $view-width : 100vw;
  $padding : 30px;
  width: 100%;
  height: calc(3 * ((#{$view-width} - #{$padding}) / 2) / 4)
 }