用CSS3制作有响应的图片

Posted 2021-04-09 前端大全

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用CSS3制作有响应的图片相关的知识，希望对你有一定的参考价值。

(点击上方蓝字，可快速关注我们)

近年来，移动设备的数量呈现爆炸式增长，越来越多的网络用户涌入了移动技术的海洋。在实践中人们发现，作为一座与用户沟通的新桥梁，移动设备易于创造新颖的用户交互体验。因此，在移动设备发展的过程中，让自己的网站能够在各式各样的屏幕中完美的运行成了大势所趋。

由于移动互联网的兴起，互联网公司正在解决如何构建面向所有类型用户的网站的问题。当前的解决方案是依靠响应式网页设计。

响应式网页设计概述

响应式网页设计是一种用于构建在各种设备上优雅运行的网站的设计方案。该设计的宗旨是使网站能够兼容所有的设备，即不受到屏幕大小、分辨率、系统平台、显示方向等因素的影响。使得用户即便身处于纷繁多样的设备之中也能获取到满意的体验。

响应式网页设计可以借助srcset、html等多种技术实现，这些技术的差别在于复杂度和浏览器支持上。不过，如果你只想以简易的方式实现它，那么CSS3就是你的不二之选。在本教程中，我将向你展示如何使用CSS3实现响应式设计。教程的内容通俗易懂，定能让你学会如何在移动设备中打造更好的用户体验。

创建一张简单的响应式图片

让我们先从一个简单的基础实例开始：

首先，我们需要建立一套样式规则（regular）以实现响应式效果。同时，创建一个div元素作为container。

HTML：

<div class=”container”>

<img src=”picture.jpg” width=”950″ height=”640″ />

</div>

CSS：

div.container {

width: 95%;

max-width: 950px;

margin: 0 auto; /* to center the container */

}

img {

width: 100%;

height: auto;

}

我们可以看到，container的width属性设为95%，因此你还可以为它设置左边距和右边距。此外，将max-width属性设为960px，以保证在大屏上container不会变得太宽。

值得注意的是，包含在container中的img元素的width属性被设为100%，这意味着无论窗口（viewport）大小怎样变化，它的宽度始终和container一致。将元素的height属性设为auto，以使图片一直保持原始比例。

需要指出的是，即使你为img元素height和width属性分配固定值（见HTML代码），它依旧具有响应式行为。

制作多列响应式图片

上例代码仅适用于单个图片，但在实际应用中，我们往往需要并排显示多列图片。这该怎么办呢？别担心，让我来教你。制作多列响应式图片其实非常简单，你只需将每个img元素的width属性调低，并设置display属性为inline-block即可。双列和三列布局是两种不同的布局方案，因此我们需要分开讨论：

双列响应式图片布局

为了构建双列响应式布局，我们需要先把container中的元素的width属性设为48%（50%亦可）。之所以让width的值小于50%，是为了让img元素能设置两侧的margin。

HTML：

<div class=”container”>

<img src=”picture1.jpg” width=”950″ height=”630″ />

<img src=”picture2.jpg” width=”950″ height=”630″ />

</div>

CSS：

img {

width: 48%;

display: inline-block;

}

三列响应式布局

同理，将元素width属性设为32%即可实现三列响应式布局。

HTML

img {

width: 48%;

display: inline-block;

}

CSS

.three-columns {

width: 32%;

display: inline-block;

}

制作带有条件式断点的响应式图片

为基本的设备类型、产品或操作系统设定断点以获得更好的体验是一个不错的选择。条件式断点（Conditional breakpoints）可以应用到列的显示中，这样每列的宽度会随着图片显示尺寸的缩小而缩小。为实现这样的功能，我们将用到media queries。

在下面的例子中，我们将让图片在智能手机中单列显示，在平板中双列显示，而在更大的设备中四列显示。

HTML

<div class=”container”>

<img src=”picture1.jpg” width=”950″ height=”630″ />

<img src=”picture2.jpg” width=”950″ height=”630″ />

<img src=”picture3.jpg” width=”950″ height=”630″ />

<img src=”picture4.jpg” width=”950″ height=”630″ />

</div>

CSS

/* to be rendered on small devices (e.g. smartphones) */

img {

max-width: 100%;

display: inline-block;

}

/* on medium devices (e.g. tablets) */

@media (min-width: 420px) {

img {

max-width: 48%;

}

}

/* For devices with larger screens (e.g. desktops) */

@media (min-width: 760px) {

img {

max-width: 24%;

}

}