使用CSS创建响应式图像

什么是响应式图像?这些类型的图像会根据不同的屏幕大小而变化，比如台式机、平板电脑或不同的手机。随着无限类型的屏幕显示和大小，它是必不可少的，你有响应图像。在本教程中，您将学习如何使图像具有响应性的最简单的技术。

视图演示下载源

有许多响应式图像技术，它们在复杂度和浏览器支持级别上各不相同。

实现响应式图像的复杂方法的一个示例是使用srcset属性，它需要多个图像、更多标记，并且依赖于新的HTML属性，而现代浏览器以外的浏览器对该属性的支持并不好。相比之下，本教程中介绍的方法很简单，只依赖于CSS宽度和高度属性，这意味着该方法几乎可以在所有浏览器和设备上工作。然而，它将要求网页设计的布局是流畅/响应式布局。

您将看到本教程中讨论的响应式图像技术的几种变体，但基本概念是相同的:使用CSS，给图像一个百分比长度单位(或任何相对长度单位，例如。ems)宽度然后给他们财产高度属性值为汽车。

Img{宽度:100%;高度:汽车;}

基本响应图像

让我们从一个基本的例子开始。我们有一个div的容器< img >元素。

超文本标记语言

  
 .jpg

容器有一个宽度属性为96%，使其具有左右边距。它有一个max-width960px，这样在大屏幕上布局不会太宽。的< 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%的原因是为了在图像的两侧留出空白。超文本标记语言

   
 .jpg

CSS

Img{宽度:48%;显示:inline-block;}

三列响应式图像布局

对于三列响应式图像布局，概念是一样的，我们只需要设置宽度属性约为容器宽度的三分之一:32%。

超文本标记语言

CSS

.three-columns{宽度:32%;显示:inline-block;}

视图的例子

带有条件断点的图像

对于在列中显示的响应式图像，有条件断点是个好主意，这样当图像太小时，列就会折叠。我们需要媒体的询问来实现这一点。在下面的示例中，图像将在智能手机上以一列方式显示，在平板电脑上以两列方式显示，在更大的屏幕上以四列方式显示。

超文本标记语言

CSS

/*用于小型设备(如智能手机)*/Img {max-width: 100%;显示:inline-block;}/*用于中型设备(如平板电脑)*/@media (min-width: 420px) {img {max-width: 48%;}}/*用于大型设备(例如:
台式电脑)* /@media (min-width: 760px) {img {max-width: 24%;}}

视图的例子注意:设置适当的值是个好主意媒体查询的每个设计工作。在演示页面中，选择的媒体查询参数在布局中工作得很好，但在其他设计中可能工作得不太好。

全宽响应图像

为了让响应图像总是100%的视口大小，我们只需要删除容器的max-width属性(即960px)，并赋予它一个宽度的100%。

.container{宽度:100%;} img{宽度:100%;}

视图的例子

警告

尽管这种响应式图像技术易于使用，并且有良好的浏览器支持，但它的缺点是它总是服务于完整大小的图像。这意味着，即使用户使用的是小型移动设备，无法充分利用图像的全尺寸和分辨率，也可以向用户提供大尺寸、高分辨率的图像。

如果你想有条件地提供相同映像的不同版本(例如，移动设备上的小版本和桌面设备上的大版本)来改进移动网页性能，浏览srcset属性和/或图片元素。如果您希望一个polyfill能够支持当今的浏览器，请参阅Scott Jehl’sPicturefill。

相关内容

• 理解响应式网页设计的要素
• 使用CSS的响应式全背景图像
• 在你的网站上添加响应式导航菜单的8种方法
• 25个漂亮的响应式网页设计的灵感示例