將同一張圖片不切割就能用不同的尺寸顯示,效果預覽如下:
這是利用照片當作背景,並以圖片的短邊為依據,不經剪裁就能以需要的比例呈現,利用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.