先說一下需求：如圖所示，api傳來的圖片顯示在頁面上，實現(xiàn)圖片比例為4：3 并適配不同移動設(shè)備的橫屏豎屏。

實現(xiàn)方法：在scss文件中使用vw，獲取屏幕寬度(1vw = 1%)，因為存在padding，所以需要calc()來計算一下，calc()可以計算vw 和 px的混合運算，需要注意的是，運算符的左右兩側(cè)必須有空格，否則calc函數(shù)將不起作用。
代碼如下：

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