以下是使用CSS添加響應式設計圖像的方法
看看今天的流行網站，您肯定會看到的一種設計治療是大屏幕跨屏背景圖像。 添加這些圖像的挑戰之一來自於網站必須響應不同屏幕尺寸和設備的最佳做法 - 一種稱為響應式網頁設計的方法 。
由於您的網站佈局會根據不同的屏幕尺寸進行更改和縮放，因此這些背景圖片也必須相應地縮放它們的尺寸。
事實上，這些“流暢的圖像”是響應式網站的關鍵部分之一（以及流暢的網格和媒體查詢）。 這三件作品從一開始就一直是響應式網頁設計的主要內容，但儘管將響應式內嵌圖像添加到網站上一直相當容易（內嵌圖像是作為HTML標記的一部分編碼的圖形），但執行與背景圖像（使用CSS背景屬性對頁面進行樣式設計）相同，長期以來一直為許多網頁設計人員和前端開發人員提供了重大挑戰。 值得慶幸的是，在CSS中添加“background-size”屬性使這成為可能。
在另一篇文章中，我介紹瞭如何使用CSS3屬性background-size來拉伸圖像以適應窗口，但是有一種更好，更有用的方式來部署此屬性。 為此，我們將使用以下屬性和值組合：
background-size：cover;
封面關鍵字屬性通知瀏覽器縮放圖像以適應窗口，而不管窗口有多大或多小。 圖像被縮放以覆蓋整個屏幕，但原始比例和縱橫比保持不變，防止圖像本身被扭曲。
圖像放置在窗口盡可能大，以便覆蓋整個窗口表面。 這意味著您的頁面中不會有空白點或圖像上出現任何扭曲，但這也意味著根據屏幕和相關圖像的縱橫比可能會裁剪掉某些圖像。 例如，圖像的邊緣（頂部，底部，左側或右側）可能會在圖像上被切掉，具體取決於您用於背景位置屬性的值。 如果將背景定位在“左上”，則圖像上的任何多餘部分都會從底部和右側脫落。 如果以背景圖像為中心，多餘部分將從所有方面出來，但是由於這種多餘部分分散開來，對任何一方的影響都會變差。
如何使用background-size：cover;
在創建背景圖像時，創建一個相當大的圖像是個不錯的主意。 雖然瀏覽器可以使圖像變小而不會對視覺質量產生明顯影響，但是當瀏覽器將圖像放大到比原始尺寸更大時，視覺質量會降低，變得模糊和像素化。 這樣做的缺點是，當您向所有屏幕提供巨大圖像時，您的頁面會受到性能影響。
當你這樣做的時候，一定要準備好這些圖片的下載速度和網頁傳送 。 最後，您需要在足夠大的圖像大小和質量以及適合下載速度的合理文件大小之間找到愉快的媒介。
使用縮放背景圖像的常用方法之一是，當您希望該圖像佔據頁面的整個背景時，無論該頁面是寬的並且正在台式計算機上查看還是小得多並正在發送到手持設備，移動設備設備。
將您的圖片上傳到您的虛擬主機，並將其作為背景圖片添加到您的CSS中：
background-image：url（fireworks-over-wdw.jpg）;
背景重複：不重複;
background-position：center center;
background-attachment：fixed;
首先添加瀏覽器前綴CSS：
-webkit-background-size：cover;
-moz-background-size：cover;
-o-background-size：cover;
然後添加CSS屬性：
background-size：cover;
使用適合不同設備的不同圖像
儘管針對桌面或筆記本電腦體驗的響應式設計非常重要，但可以訪問網絡的各種設備已經大幅增加，而且屏幕尺寸也隨之增加。
如前所述，例如，在智能手機上加載非常大的響應背景圖像不是一種有效的或帶寬意識的設計。
了解如何使用媒體查詢來提供適合其顯示設備的圖像，並進一步提高網站與移動設備的兼容性。
Jennfier Krynin的原創文章。 由Jeremy Girard編輯9/12/17