更新時間:2021-05-12 來源:黑馬程序員 瀏覽量:
當設(shè)備像素比很大時,圖片會被放大,而放大會讓圖片看起來模糊。為此,我們可以使用二倍圖的方式來提高圖片的清晰度。接下來就來講解二倍圖的概念和使用方法。
在實際開發(fā)中,當一個50 ×50像素(CSS像素)的圖片直接放到iPhone 6/7/8設(shè)備中顯示時,圖片會被放大,變成原來的兩倍(iPhone 6/7/8的設(shè)備像素比為2),即100 ×100。為了避免圖片放大后模糊,我們可以預先制作一張100 ×100的圖片,然后在網(wǎng)頁中手動設(shè)置這個圖片的樣式,將圖片的寬和高都設(shè)為50像素。這樣,這張圖片就會以它原本的像素(100 ×100)來顯示,保證了圖片的原有清晰度。
為了讓讀者更好地理解,下面通過例2-6演示二倍圖的使用方法。
【例2-6】
(1)創(chuàng)建C:\web\chapter02\demo06.html文件,具體代碼如下。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>二倍圖</title> <style> img:nth-child(2) { width: 50px; height: 50px; } </style> </head> <body> <!-- 原圖 --> <img src="images/50.png" alt=""> <!-- 二倍圖 --> <img src="images/100.png" alt=""> </body> </html>
在上述代碼中,第8~11行代碼使用CSS 3子元素選擇題:nth-child獲取到第2張圖片,并手動設(shè)置圖片的寬度和高度為50px;第16行代碼使用img標簽引入50 ×50的圖片;第18行代碼引入100 ×100的圖片。相應(yīng)的圖片素材可以從配套源代碼中獲取。
(2)在瀏覽器中打開demo07.html,觀察iPhone 6/7/8中的顯示效果。為了方便對比兩張圖的區(qū)別,將縮放設(shè)置為150%,運行結(jié)果如圖1所示。
圖1 二倍圖
在圖1中,左邊的圖片是原圖,右邊的圖片是二倍圖。由此可見,二倍圖在頁面中顯示的效果更加清晰。