隨着移動開發熱潮的興起，已經有越來越多的公司將移動端的開發列為核心，其中不論是webapp還是手機頁面都是如此，在開發的過程中就涉及到了一個web響應式圖片的問題，這里我們就來探討一下響應式圖片的實現
最簡單的圖片響應式的實現就是通過限定圖片的長寬的像素值，並把圖片的寬度設置為100%，然后把高度設置為auto.
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>blog案例</title> <style type="text/css"> img{ width:100%; height:auto; } </style> </head> <body> <img src="img1.jpg"> </body> </html>
效果如下：
從圖中大致上可以看出圖片隨着窗口的大小發生了響應，但是錄制工具渲染的效果不太理想，這個大家就將就着看吧
但是這一種方法有一個局限，就是完全隨着屏幕的變大變小來拉伸一張圖片，這樣屏幕一旦變大了的話容易出現圖片失真的現象，這個時候我們要達到的要求是最大也就是能夠顯示到圖片原來的大小，視口變小的時候，圖片也跟着變下。
這個時候代碼可以這樣改進：
img{ max-width:100%; height:auto; }
這樣做的好處是解決了圖片因為響應屏幕寬度的變化而導致的失真的現象，在這里要說明一下就是圖片放大到極致就是原圖片的寬度，如果是屏幕比圖片小的話，那么圖片就會響應屏幕的大小發生變化，同時保持寬度被拉伸到100%
除了可以這樣來設置響應式圖片，我們還可以通過將圖片設置為背景圖片的方法來達到響應式
實現思路是將圖片當做背景來使用，然后在背景圖片中添加一個background-size: contain;屬性
例如：將上面的代碼我們可以這樣來改寫
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>blog案例</title> <style type="text/css"> div { width: 100%; height: 400px; background-image: url('img1.jpg'); background-repeat: no-repeat; background-size: contain; border: 1px solid red; } </style> </head> <body> <div></div> </body> </html>
細心的讀者是否想過這樣做的根本還是沒有解決圖片的響應的問題，這樣只不過說得上是讓圖片適應屏幕的大小而已，那么終究要才能實現圖片的響應呢？這里我們的設計思路跟響應式布局有點相似，都是通過設置CSS的媒體查詢來讓瀏覽器在不同的情況下加載不同的圖片，我們可以把上面的例子這樣改寫
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>blog案例</title> <style type="text/css"> body{ background-repeat:no-repeat; background-image:url('img1.jpg'); } @media only screen and (min-width: 400px) { body { background-image: url('img2.jpg'); } } </style> </head> <body> <div></div> </body> </html>
運行的效果如下：
當然除了上面的這種方法，在HTML5中還提供了picture元素，用於響應式圖片的實現，picture元素的用法與video與audio的用法有點相似，都是通過在標簽下面添加source標簽用來顯示你所要顯示的圖片，具體的使用案例如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>blog案例</title> <style type="text/css"> img {display: block; margin: 0 auto;} </style> </head> <body> <picture> <source media="(min-width: 650px)" srcset="img1.jpg"> <source media="(min-width: 465px)" srcset="img2.jpg"> <img src="img3.jpg" alt="a cute kitten"> </picture> </body> </html>
分析：source主要是用來顯示要存放的圖片，然后img默認是不顯示的，但是如果是瀏覽器不支持picture的時候，img就會被顯示出來，用來解決標簽在不同瀏覽器之間的兼容性。source中的media是用來指定響應式圖片的響應范圍，srcset就是用來指定圖片源。
這個就是原生的圖片響應式實現，運行一下，效果跟上面的例子相同
響應式圖片我們可以當做一個知識點來進行儲備就可以了，實現的原理也是五花八門，但是推薦大家使用picture來實現，一個是實現比較規范，另外一個是能夠達到按需加載的要求，如果覺得本文有所獲或者對你有幫助的話，請不吝點贊