背景图片自适应屏幕

指定宽度进行缩放

可以设置 CSS width: 100%，让背景图片随着浏览器的窗口变化

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

Demo

在上面的例子中，图片可以可以随着窗口放大到比原来还要大的尺寸。所以，在大一些的屏幕中，图片会失真

可以通过设置 max-width: 100% 阻止图片放大到比它原始尺寸还要大

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

Demo

使用 background-size 自适应屏幕

可以设置 background-size: cover，它指示浏览器自动的将背景图片的高度和宽度缩放为，和 viewport 的宽高一样或者更大

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

Demo

背景图片会填满整个屏幕，不留下空白
图片在中央，必要的时候进行缩放，并且不会产生滚动条

有关背景图片的其他方法

保持宽高比

如果你的图片比较小，并且，不想让你的图片失真，可以选择这种方法
设置 background-size: contain, 它告知浏览器，背景图像会缩放以适应内容区域，但是不会失去宽高比或者变得模糊

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

Demo

通过拉抻图像填充区域

你可以设置 background-size: 100% 100%; 通过拉伸背景图片，填充一个指定的区域

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

Demo

媒体查询

在小的屏幕上使用大的图像会使页面加载的时间更长，从而使用户的体验变差

因此，我们使用媒体查询在各种屏幕尺寸上以不同的方式显示图像。

在下面的例子中，有一大一小两张图片。我们用 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。它自适应 viewport 的大小

因此，当你调整浏览器窗口的大小时，可以确保图像不会更改

/* 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中引入的。它用于定义两个或更多图片

注意：当某个图片不能加载或者图片的尺寸依赖于屏幕的尺寸时，使用<picture> 元素可以加载不同的图片

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

Demo

你必须设置 srcset 属性指定图片资源。你可以根据需要，设置多个图片，但是你要记住，你指定这些图片的顺序，

media 这个属性不是必须的，但是你应该加上这个属性

你还应该设置 <img> 元素，兼容不支持 HTML5 的旧版浏览器