[css/scss] 自適寬度的圖片(Responsive Image)-img隨div大小改變自行縮放

將同一張圖片不切割就能用不同的尺寸顯示，效果預覽如下：

這是利用照片當作背景，並以圖片的短邊為依據，不經剪裁就能以需要的比例呈現，利用css對背景圖片設定的支援功能，設定像是background-position，如果圖片過大時從哪個位置開始進行剪裁，以下為scss撰寫的原始碼。

首先，先準備一個Parent Class，『%』後面加上名稱，在編譯成css後不會看到這個class。

%responsive-image {
 display: flex;
 width: 100%;
 flex: 100%;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center center;
}

接著設定一個image-1x1的class，使所有的圖片都能以1比1的比例顯示。

// H:1, W:1
.image-1x1{
 @extend %responsive-image;
 padding-bottom: percentage(1 / 1);
}

以此類推，如果需要顯示一個長300、寬400的圖片，請在括號內填入『(3/4)』，就能達到想要的效果！

在html裡面套用這個class。

<div class="image-1x1" style="background-image: url('https://picsum.photos/400/?image=318');"></div>

我搭配bootstrap的grid system寫了一個完整的範例，可以在codepen上找到[連結]，請參考：

See the Pen Responsive Image by chenuin (@chenuin) on CodePen.