响应式图片

响应式图像：

<div class="img-box">
    <img class="img-responsive" src="assets/images/zbl01.jpg"/>
</div>

在下面的代码中，可以看到img-responsive class为图像赋予了max-width:100%;和height:auto;属性，可以让图像按比例缩放，不超过其父元素的尺寸。

 .img-responsive {
            display: inline-block;
            height: auto;
            max-width: 100%;
        }

此例子的图片大小是：279*203px--

1,当图片的父元素大于图片的大小时：如下

 .img-box{
            width:300px;
            height:300px;
            background-color: #3c8dbc;
        }

此时图片以自己的原始尺寸展现。

当图片的父元素的尺寸小于图片的大小时，如父元素的宽度为100px

 .img-box{
            width:100px;
            height:300px;
            background-color: #3c8dbc;
        }

 二，背景图片

背景图片可以响应调整大小或缩放。

1，如果background-size树形设置为“contain”,背景图片将按比例自适应内容区域，图片保持其比例不变：

2,如果background-size属性设置为"100% 100%",背景图片将延展覆盖整个区域：

3,如果background-size属性设置为"cover",则会把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，注意该属性保持了图片的比例，因此

背景图像的某些部分无法显示在背景定位区域中。

 

 不同设备显示不同图片

大尺寸图片可以显示在大屏幕上，但在小屏幕上却不能很好显示，我们没有必要在小屏幕上去加载大图片，这样很影响加载速度

。所以我们可以使用媒体查询，根据不同的设备显示不同的图片。

三，HTML5<picture>元素

HTML5的<picture>元素可以设置多张图片。