網頁開發 網頁設計

[教學] AMP 讓圖片支援自適應,可依裝置任意的縮放圖片大小

梅干 2018/12/14

梅問題-[教學]AMP 讓圖片支援自適應,可依裝置任意的縮放圖片大小

  自從Google宣布AMP將會有助於優先排序後,讓許多站長們,紛紛的將網站導入AMP的架構,而AMP簡單的來說,就有點像是精簡版的手機網頁,因此為了讓網頁能達到快速開啟,除了Google會將網站暫存在他們的主機中,再來就是全面的禁用Javascript,因此可發現到,當開啟AMP的網頁,都相當的快速且也沒有多餘的特效,一切就是快。

除此之外,當導入AMP的網頁架構時,第一個會面臨到的問題就是圖片,由於在AMP的架構裡,所有的圖示都需指定,圖片的長與寬,因此就會造成當手機尺寸,小於圖片尺寸時,就會造成圖片被截掉的問題,再加上現在的手機尺寸,還真是五花八門,一點都輸給桌機,因此要如何在AMP架構中,將圖片開啟RWD自適應的機制,其實方法很簡單,現在就一塊來看看囉!


Step1
首先,在導入AMP的網頁架構後,再依照AMP的語法,將圖片加入到網頁中,由於圖片需指定長寬,因此圖片就會依照設定的尺寸作顯示。
<amp-img src="img/01.jpg" width="1920" height="1175"></amp-img>

梅問題-[教學]AMP 讓圖片支援自適應,可依裝置任意的縮放圖片大小


Step2
這時當切到手機模式時,就會看到圖片因為超出手機顯示範圍,則自動被截取掉。
梅問題-[教學]AMP 讓圖片支援自適應,可依裝置任意的縮放圖片大小
Step3
而解決方法很簡單,只需在amp-img的標籤中,加入「 layout="responsive"」,這樣立即就可解決圖片被卡掉的問題啦!同時圖片還會依照手機的顯示尺寸,自動的縮放圖片的顯示大小啦!是不是超容易的呀!因此最近要導入AMP的朋友,也多加留意囉!
梅問題-[教學]AMP 讓圖片支援自適應,可依裝置任意的縮放圖片大小
#範例預覽