在默认情况下，图像显示的尺寸是HTML 中指定的width 和height 属性值。如果不指定这些属性值，图像就会自动按照其原始尺寸显示。此外，可以通过CSS 以像素为单位设置width 和height。显然，当屏幕宽度有限的时候，按原始尺寸显示图像就不一定合适了。使用可伸缩图像技术，就可以让图像在可用空间内缩放，但不会超过其本来的宽度。
为图像添加如下类样式：
.post-photo,.post-photo-full {
max-width: 100%;
}
这样可伸缩图像可以根据包含它们的元素（本例为body）的尺寸按比例缩放。
一定要使用max-width: 100% 而不是width: 100%。它们都能让图像在容器内缩放，不过，width: 100% 会让图像尽可能地填充容器，如果容器的宽度比图像宽，图像就会放大到超过其本来尺寸，有可能会显得较为难看。
上面样式对已经为Retina 显示屏扩大到双倍大小的图像也适用。当然，双倍分辨率的图像的文件大小也会大很多。
可以使用background-size 属性对背景图像进行缩放（对IE8 无效）。更多信息参见www.css3.info/preview/background-size/。
【提示】
还可以使用video, embed, object{ max-width: 100%; } 让HTML5 视频及其他媒体变成可伸缩的（同样也不要在HTML中为它们指定width 和height）。