先说一下需求：如图所示，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)
}
