html - 响应式设计 : different images for different screen sizes

Question

我们的客户希望在较小的屏幕上与在较大的屏幕上使用不同的横幅图片。不只是收缩/拉伸(stretch)以适应，而是实际替换不同的图像。全尺寸图像相当复杂——几个人、两个 Logo 和一些装饰性文字——因此对于较小的图像，他们希望裁剪掉一些人、删除 Logo 等。所以他们想要最大的，最复杂的桌面图像，更小更简单的图像适用于中型设备，然后更小更简单的最小图像。

执行此操作的最佳方法是什么？

我的第一个想法是包括所有三个图像，并使用@media 最小/最大宽度使其中两个在任何给定尺寸下都不可见。喜欢:

@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，但这似乎很复杂。

我简单地想到了将 Logo 和文本分开的图像并将实际图片分成几 block ，然后尝试将它们全部组合成重叠的图像。但这听起来需要做很多工作才能做到正确，然后我必须确保它在所有可能的尺寸下看起来都正确，而不是简单地收缩或拉伸(stretch)等等。虽然它在这个特定的地方可能是可行的在这种情况下，我更喜欢将来可以使用的通用解决方案。

有人做过这样的事情并且对最好的方法有一些想法吗？

Answer 1

你可以在 media queries 中使用 css background。图像仅在 CSS 要求时才加载，因此如果没有匹配选择器的内容，它就不会加载图像。

This文章一定能帮到你。