指定寬度進(jìn)行縮放

可以設(shè)置 CSS width: 100%，讓背景圖片隨著瀏覽器的窗口變化

img {
    width: 100%;
    height: auto;
}

Demo

在上面的例子中，圖片可以可以隨著窗口放大到比原來還要大的尺寸。所以，在大一些的屏幕中，圖片會(huì)失真

可以通過設(shè)置 max-width: 100% 阻止圖片放大到比它原始尺寸還要大

img {
    max-width: 100%;
    height: auto;
}

Demo

使用 background-size 自適應(yīng)屏幕

可以設(shè)置 background-size: cover，它指示瀏覽器自動(dòng)的將背景圖片的高度和寬度縮放為，和 viewport 的寬高相同或者更大

html {    
    background: url('image.png') no-repeat center fixed;     
    background-size: cover;
}

Demo

• 背景圖片會(huì)填滿整個(gè)屏幕，不留下空白
• 圖片在中央，必要的時(shí)候進(jìn)行縮放，并且不會(huì)產(chǎn)生滾動(dòng)條

有關(guān)背景圖片的其他方法

保持寬高比

如果你的圖片比較小，并且，不想讓你的圖片失真，可以選擇這種方法
設(shè)置 background-size: contain, 它告訴瀏覽器，背景圖像會(huì)縮放以適應(yīng)內(nèi)容區(qū)域，但是不會(huì)失去寬高比或者變得模糊

div {
    width: 100%;
    height: 300px;
    background-image: url('doggo.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    border: 2px solid #e9385a;
}

Demo

通過拉抻圖像填充區(qū)域

你可以設(shè)置 background-size: 100% 100%; 通過拉伸背景圖片，填充一個(gè)指定的區(qū)域

div {
    width: 100%;
    height: 300px;
    background-image: url('doggo.jpg');
    background-size: 100% 100%;
    border: 2px solid #e9385a;
}

Demo

媒體查詢

在小的屏幕上使用大的圖像會(huì)使頁(yè)面加載的時(shí)間更長(zhǎng)，從而使用戶的體驗(yàn)變差

因此，我們使用媒體查詢?cè)诟鞣N屏幕尺寸上以不同的方式顯示圖像。

在下面的例子中，有一大一小兩張圖片。我們用 CSS 選擇適合屏幕的圖片

/* For screens with width smaller than 400px */
body {
    background-image: url('small-birb.jpg'); 
}

/* For larger screens */
@media only screen and (min-width: 400px) {
    body { 
        background-image: url('birb.jpg'); 
   }
}

Demo

可以使用 min-device-width 代替 min-width。它自適應(yīng) viewport 的大小

因此，當(dāng)你調(diào)整瀏覽器窗口的大小時(shí)，可以確保圖像不會(huì)更改

/* For devices with width smaller than 400px */
body {
    background-image: url('birb-small.jpg'); 
}

/* For larger devices */
@media only screen and (min-device-width: 400px) {
    body { 
        background-image: url('birb.jpg'); 
   }
}

Demo

HTML5 的 <picture> 元素

<picture>元素是在HTML5中引入的。 它用于定義兩個(gè)或更多圖片

注意：當(dāng)某個(gè)圖片不能加載或者圖片的尺寸依賴于屏幕的尺寸時(shí)， 使用<picture> 元素可以加載不同的圖片

<picture>
  <source srcset="birb-small.jpg" media="(max-width: 400px)">
  <source srcset="doggo.jpg">
  <img src="doggo.jpg" alt="cannot display">
</picture>

Demo

你必須設(shè)置 srcset 屬性指定圖片資源。你可以根據(jù)需要，設(shè)置多個(gè)圖片，但是你要記住，你指定這些圖片的順序，

media 這個(gè)屬性不是必須的，但是你應(yīng)該加上這個(gè)屬性

你還應(yīng)該設(shè)置 <img> 元素，兼容不支持 HTML5 的舊版瀏覽器

以上是我翻譯的
原文鏈接：
https://www.bitdegree.org/learn/responsive-image