Html 响应性设计：不同屏幕尺寸的不同图像

我们的客户希望小屏幕上的横幅图像与大屏幕上的横幅图像不同。不只是收缩/拉伸以适应，而是实际替换不同的图像。全尺寸图像相当复杂——几个人、两个徽标和一些装饰性文字——因此，对于较小的图像，他们希望裁掉一些人，去掉徽标，等等。因此，他们希望桌面上的图像最大、最复杂，中型设备的图像较小、更简单，而最小的设备的图像则更小、更简单

最好的方法是什么

我的第一个想法是包含所有三个图像，并使用@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，但这似乎有点复杂

我简单地考虑过将徽标和文本分开，并将实际图片分割成若干部分，然后尝试将它们全部组合成重叠的图像。但这听起来需要做很多工作才能做好，然后我必须确保它在所有可能的尺寸上看起来都是正确的，不那么容易收缩或拉伸，等等。虽然它在这种特殊情况下可能是可行的，但我更喜欢一个我可以在未来使用的通用解决方案

---

有人做过这样的事情，对最好的方法有什么想法吗

我会检查Zurb基金会处理响应图像的交换。我发现的最好的跨浏览器方法

---

您可以在

媒体查询中使用css
后台
。图像仅在CSS要求时加载，因此如果没有与选择器匹配的内容，则不会加载图像

这篇文章肯定会对您有所帮助。
您为什么不测试一下呢？只需将一些图像设置为背景并隐藏它们。然后，您可以从浏览器中检查是否确实在请求隐藏的div。@如果块被隐藏，使用背景图像的Francisco Presencia将不会加载图像（请参阅）。@Jay如果较小的图像被“裁剪”最大图像的s您可以加载一次最大的图像作为横幅的背景，并对不同的屏幕大小使用背景大小和背景定位，以防止加载多个图像。您可以更改每个图像的z索引或不透明度吗？这样，它们就不必因“显示：无”而重新加载。只是想一想。如果用户打印网页，那么除非他们打开背景图像打印功能（默认为关闭），否则图像将不会显示。在哪个设备或浏览器上@Jay不是所有浏览器都是这样吗？我知道IE也是如此，我还以为Firefox也是如此。我没有有意识地尝试其他浏览器或设备。等等，我帖子中的关键词是“打印”。是的，现在所有主流浏览器都支持背景图像。但当用户打印图像时，与在屏幕上显示图像相反，至少在某些浏览器中，默认行为是不打印背景图像。我认为“真实”的背景图像是一种背景，一种装饰性的东西，只会把打印出来的页面弄得乱七八糟。