大頭照

你好,我是米米

菜雞前端工程師

[教學]圖片自適應外框大小2

使用aspect-ratio來固定比例!

米米

css

前言

一年前我上傳了[教學]圖片自適應外框大小的教學文章,透過控制圖片的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裡面它就會壞掉,或是需要一定程度上的給定寬度,但總體來說我認為還是不錯的方法,供大家參考。

感謝抖內

BUY ME A COFFEE
comments powered by Disqus
comments powered by Disqus

advertisement

recent post

categories

advertisement

about

你好,我是米米,是個剛畢業就已經成為社畜的前端工程師==