Question

处理响应式和自适应布局时处理图像（或精灵）的最佳方法是什么？我现在这样做的方法是使用基于视口尺寸的条件图像选择的媒体查询。有更好的方法，为什么？

Answer 1

如果您希望images也responsive（调整大小），则sprite不是一个好主意。最好用作单个图像但是如果图像不是responsive（调整大小），那么你可以用作精灵。

永远不要在任何响应元素的sprites中提供background。这是height＆amp; width应该修复。

Answer 2

您可以尝试以下方法： Stretchy Sprites （说明和演示） - 纯HTML / CSS，不依赖background-size

Answer 3

根据我的经验，响应式设计是制作动态/可调整大小内容（弹性框，矢量/可缩放图像等）的一半，使用媒体查询的一半 - 所以是的一部分可以使用条件图像选择和媒体查询。 / p>

至于可扩展的图像，您是在谈论更多关于需要保持高质量的图标/小图片或大型/用户上传图像吗？

对于图标/小图像（例如你将放入.png图像精灵），我会尝试无限可扩展的矢量图像：

图标字体（仅适用于单色图标，但可以使用CSS设置样式，因此它们非常易于使用）：

http://css-tricks.com/examples/IconFont/ http://fortawesome.github.com/Font-Awesome/#base-icons

所需软件：矢量图像编辑器（Adobe Illustrator，Inkscape）和字体编辑器（FontCreator，FontForge）。

SVG - 使用起来有点棘手，但可以处理更复杂的图形。

所需软件：矢量图像编辑器（我推荐Adobe Illustrator）这是一个完全可调整大小的svg页面的示例，没有媒体查询： http://emacsformacosx.com/

矢量图形的优势在于它们可以在任何屏幕尺寸上工作，并且它们通常加载速度更快（更小的文件大小），因此如果您认真对待“响应”，我会尝试在矢量中执行所有操作。

这就是“冰山一角”所以说 - 如果你有特定的问题，乐意分享更多;我花了一些时间来弄清楚如何获得软件设置并实现上面的跨浏览器（例如Android 4.0以下不支持SVG所以我不得不依赖.png精灵，我写了一个允许可调整大小的javascript文件精灵 - 类似于“弹性精灵”帖子） - 如果您可以使用单色图标，这是图标字体的另一个优势。

Answer 4

Matt Wilcox的自适应图像可能就是你所追求的。

http://adaptive-images.com/

使用Javascript将用户的屏幕大小考虑在内，并根据可用的大小提供图像的缓存大小调整版本。

它基本上会查找较小的缓存图像，如果找到它们就会提供它们，如果它们不存在则会生成它们。

Answer 5

我最近回顾了很多关于这个主题的资料。有很多方法可用，绝不是绝对的。我为所有静态图像（图像等）使用背景图像（背景大小：包含或背景大小：封面）。但是，动态生成的图像难以在优雅（非脚本）范例中进行管理。因此，在审阅了许多脚本之后，我就写了自己的脚本。我希望这会有所帮助：

/**
 * Retina image update script. Invoke with Retina.render().
 * Retina.render() may be passed a selector for img selection.
 * The default filter looks for img's with data-scale="retina".
 * @param {string|function} expr    A CSS selector expression or jQuery filter function.
 * @return {boolean|collection}     Returns false or (for Retina displays) the images updated.
 * @author Joe Johnson
 */
(function(ns,$){
    ns.Retina = {
        render: (function(isRetina){
            return isRetina ? function(expr){
                var r1 = /retina/i, r2 = /\d{3}/,
                    filter = expr ? expr : function(){
                        return r1.test($(this).data("scale"));
                    };
                return $("img").filter(filter).each(function(){
                    this.src = this.src.replace(r2,function(m){
                        return (parseInt(m,10)>=640 ? m : 2*m);
                    });
                });
            } : function(){ return false; };
        })(ns.devicePixelRatio && (ns.devicePixelRatio > 1))
    };
})(window,jQuery);

应该注意的是，你仍然需要依赖一些文件名约定（在这种情况下，r2 - 正则表达式 - 在图像src属性中搜索一个基于维度的值的目录[img / blah] /320/image.jpg更新为img / blah / 640 / image.jpg]。已经跳过已包含数字大于640的目录的src的图像将被跳过，因为我假设它们已经足够大了Retina显示（我使用它的网站在目录/ img / dir / 320 /，/ img / dir / 640和/ img / dir / 960中有图像）。

在自适应和响应式布局中处理图像

5 个答案: