搜尋

熱門關鍵字:

最新文章

  1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. [教學] AMP 讓圖片支援自適應，可依裝置任意的縮放圖片大小

[教學] 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 讓圖片支援自適應，可依裝置任意的縮放圖片大小

#範例預覽


amp圖片rwd, amp圖片自適應, amp教學, 圖片rwd, 圖片自適應,