我们的客户希望在较小的屏幕上拥有与在较大屏幕上不同的横幅图像。不仅缩小/拉伸以适合，而且实际上替换不同的图像。全尺寸图像相当复杂 - 有几个人，两个徽标和一些装饰性文字 - 因此对于较小的图像，他们想要裁剪一些人，删除徽标等。所以他们想要最大的，最复杂的桌面图像，中等尺寸设备的图像更简单，然后更小，更简单，适用于最小的图像。
这样做的最佳方式是什么？
我的第一个想法是包含所有三个图像，并使用@media min / max widths使其中两个在任何给定大小下都不可见。像：
@media (max-width: 400px) { .smallimg {display: block} .midimg {display: none} .bigimg {display: none} }
@media (min-width: 401px) and (max-width: 700px) { .smallimg {display: none} .midimg {display: block} .bigimg {display: none} }
@media (min-width: 701px) { .smallimg {display: none} .midimg {display: none} .bigimg {display: block} }
这应该可行，但每次都会下载所有三张图片，这似乎是浪费带宽。
我可以将图像从img标签更改为css背景图像。会更好吗？这会避免下载这三个还是仍然会这样做？
我正在考虑编写一些JavaScript来根据屏幕大小动态更新img标签中的URL，但这似乎是一堆复杂性。
我简单地想过让徽标和文本分开图像并将实际图片分成几块，然后尝试将它们全部组合成重叠图像。但这听起来似乎要做很多工作，然后我必须确保它看起来正确的尺寸，不是那么容易缩小或拉伸等等。虽然它可能在这个特定的我希望将来可以使用一般的解决方案。
有人做过这样的事情并对最好的方法有一些想法吗？
答案 0 :(得分：3)
您可以在background中使用css media queries。只有在CSS要求的情况下才会加载图像，因此如果没有任何内容与选择器匹配，那么它就不会加载图像。
This文章肯定会对您有所帮助。
答案 1 :(得分：1)
我会检查Zurb Foundation的Interchange处理响应式图像。我发现了最好的跨浏览器方法。