弹性图片几种实现形式
最后更新于：2022-04-01 23:56:31
# 响应式图片
响应式 web 设计意味着，不仅我们的布局能基于设备特征变化，内容也能。比如，高分辨率 (2x) 显示屏上，就需要高分辨率图片保证清晰度。当浏览器宽 800px 时，一张 50% 宽度的图片或许很适合，但在一个局促的手机上，则会占用太多空间，另外，缩小图片来适应小屏幕时，耗费的带宽支出却是一样的。
其余时候，图片也许需要更大幅度的修改：更改比例，裁剪甚至更换整张图片。
## 传统解决方案
固定宽度，像素完美的网站设计已经离我们远去了。在宽屏显示器，互联网电视，多尺寸的平板电脑和智能手机的今天，我们的设计必须应付一切可能，将宽由320px向7680px转变。
伴随这种多分辨率风景而至的，是需要拉伸或收缩图像，以适应这些不同的要求。这可以被理解为如下问题，矢量图形出现异常时，绝大多数具有特定像素的图像宽度并不改变。
所以，我们应该怎么做呢?
作为一般规则，你会在任何响应式网站中发现以下CSS样式:
img{
max-width:100%;
height:auto;
}
此代码使用max-width:100%的设置，以确保图像永远不会超越其父容器的宽度。如果父容器的宽度收缩小于图像的宽度，图像将随之缩小。height:auto的设置可以确保当有这种情况发生时，图像将以自身的宽高比保留。
这解决了一方面的问题，使我们能够在许多不同的情况下显示相同的图像。不过，这并不能让我们对不同的情况指定不同的图像。
## 使用HTML5中的picture元素处理响应式图片
是HTML5一个新的元素。
如果元素与当前的
';