什么是响应图像?这些类型的图片会改变大小以适应不同的屏幕尺寸，比如在台式机、平板电脑或不同的手机上。随着屏幕显示的类型和尺寸的无限增加，具有响应性图像是至关重要的。在本教程中，您将学习最简单的技术来学习如何使图像响应。
有许多响应式图像技术，它们的复杂性和浏览器支持程度各不相同。
实现响应映像的复杂方法的一个例子是使用srcset属性，它需要多个图片、更多的标记，并依赖于一个新的HTML属性，而这个属性在现代浏览器之外没有得到很好的支持。相比之下，本教程中介绍的方法很简单，只依赖于CSS宽度而且高度属性，这意味着该方法将在几乎所有浏览器和设备上工作。然而，它将要求网页设计的布局是流动/响应式布局。
在本教程中，您将看到响应式图像技术的几种变体，但基本概念是相同的:使用CSS，给图像一个百分比长度单位(或任何相对长度单位，例如。ems)宽度财产然后给他们高度属性的值汽车．
Img{宽度:100%;高度:汽车;｝基本的响应图像
让我们从一个基本的例子开始。我们有一个div就像容器一样< img >元素。超文本标记语言
容器有一个宽度96%的属性使其具有左右边缘。
它有一个max-width960像素，这样布局在大屏幕上不会太宽。的< img >元素具有宽度属性为100%，这样无论视口大小如何，它的宽度总是等于它的容器，从而使它具有响应性。的高度被设置为汽车这样图像就会按比例缩放。
CSS
Div.container{宽度:96%;max-width: 960 px;保证金:0汽车;/*将容器居中} img{宽度:100%;高度:汽车;｝
视图的例子请注意,< img >元素将响应，即使它在标记中被赋予固定的宽度和高度的HTML属性。宽度= " 960 "高度= " 640 ")．这很好，因为这意味着该技术适合于通过HTML设置固定维度的遗留内容。
列中的响应图像
有时，我们希望图像在列中并排显示。例如，图片库通常在网格上显示缩略图。为了在列中实现响应式图像，我们唯一需要做的改变就是降低CSS宽度财产和给< img >一个元素显示属性值的inline-block．
让我们讨论几种布局方案:两列图像布局和三列图像布局。
两栏响应式图像布局
对于两列响应式图像布局，我们可以设置CSS宽度属性为48%，约为集装箱的一半。不设置为50%的原因是为了给图片留出边距。超文本标记语言
CSS
Img{宽度:48%;显示:inline-block;｝三列响应式图像布局
对于三列响应式图像布局，概念是一样的，我们只需要设置宽度属性设置为容器宽度的三分之一:32%。超文本标记语言
.jpgCSS
.三列{宽度:32%;显示:inline-block;｝带有条件断点的图像
为列中显示的响应图像设置条件断点是个好主意，这样当图像太小时，列就会坍塌。我们需要媒体的询问才能做到这一点。在下面的例子中，这些图像将在智能手机上显示为一栏，在平板电脑上显示为两栏，在更大的屏幕上显示为四栏。
超文本标记语言
CSS
/*用于小型设备(如智能手机)*/Img {max-width: 100%;显示:inline-block;｝/*用于介质设备(如平板电脑)*/@媒体(最小宽度:420像素){img{最大宽度:48%;}}/*用于大型设备(例如:台式电脑)* /@媒体(最小宽度:760px) {img{最大宽度:24%;}}视图的例子注意:适当的设置是一个好主意您所处理的每个设计的媒体查询．在演示页面中，所选择的媒体查询参数在布局中工作得很好，但在其他设计中可能不太好。
宽屏图像响应
为了使响应图像始终是视口大小的100%，我们只需要删除容器的max-width属性(960px)，并给它一个宽度的100%。
.container{宽度:100%;} img{宽度:100%;｝警告
尽管这种响应式图像技术很容易使用，并且有很好的浏览器支持，但它的缺点是它总是会提供完整大小的图像。这意味着，即使用户使用的是小型移动设备，无法充分利用图像的全尺寸和分辨率，也可以提供大的、高分辨率的图像。如果您想有条件地提供同一映像的不同版本(例如:
更小的尺寸用于移动设备和更大的版本用于台式机)移动网络性能，请参阅srcset属性和/或图片元素。如果你想要一个polyfill能够支持今天的浏览器，请参阅Scott Jehl的Picturefill．
