前言

一年前我上傳了[教學]圖片自適應外框大小的教學文章，透過控制圖片的max-width: 100%, max-height: 100%以及使用object-fit來控制，那篇的流量還蠻高的，我想一定是大家都有圖片跑版的困擾吧，因此我決定再分享我最近發現好用的方法。

aspect-ratio

這次介紹另一個語法叫做aspect-ratio，看到ratio就可以猜出它可控制比例，它的語法如下：

其中1/1的地方是可以任意設定的，假設需要圖片以16：9的方式呈現，其值設為16/9，需要4：3的比例，就設成4/3以此類推。

組合技：使用aspect-ratio加上object-fit

每個版面的圖片都有建議尺寸，客戶如若不按照建議尺寸亂上圖片，圖片就會大跑版，因此我們需要考量到這點，要將圖片限制在固定的區域。

常用的方式有兩種，一種是強制將圖片等比例塞進限制的空間，不符合建議尺寸的圖片就會留有白邊：另一種是將圖片放大後裁切超出的部分，但無法控制要裁切的中心，所以不適合放有文字的圖片。

我們先來看範例：

object-fit可以很好的去控制圖片要contain或是cover，也就是做到前面剛剛講的兩種方式。

以前我們我們只單純用到object-fit來控制，但它缺乏寬高，因此需要指定給它，但這樣在不同的尺寸的裝置就需要設定好幾種，非常浪費時間。

因此我們使用aspect-ratio來控制圖片的比例，如此一來就不需要設定高度了，圖片會根據比例撐開。（本範例使用Bootstrap的欄位系統，每個欄位的寬度自然就被定下來了，因此就不需要設定寬高）。

最後需要給定圖片的寬度，也就是width: 100%。圖片剛剛講的去設定也有可能會符合比例但是卻太小，或者是太大直接炸開，因此要去控制圖片寬度為100%讓它撐滿。

主要的寫法整理成：

結語

希望這個小方法可以幫助大家，當然它還是有一定的限制在的，像是有時在display: flex裡面它就會壞掉，或是需要一定程度上的給定寬度，但總體來說我認為還是不錯的方法，供大家參考。