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

Posted 2023-03-05

【中文标题】响应式设计：不同屏幕尺寸的不同图像

【英文标题】：Responsive design: different images for different screen sizes

【发布时间】：2014-05-05 07:12:16

【问题描述】：

我们的客户希望在小屏幕上显示与在大屏幕上不同的横幅图片。不仅缩小/拉伸以适应，而且实际上替换了不同的图像。全尺寸图像相当复杂——几个人、两个标志和一些装饰性文字——所以对于较小的图像，他们想要裁剪一些人，去掉标志等。所以他们想要最大的，最复杂的图像适用于台式机，较小的更简单的图像适用于中型设备，然后更小更简单的图像适用于最小的设备。

最好的方法是什么？

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

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

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

【问题讨论】：

你为什么不测试一下？只需将一些图像设置为背景并隐藏它们。然后你可以从浏览器中检查你是否真的在做隐藏div的请求。

@FranciscoPresencia 如果块被隐藏，使用背景图像将不会加载图像（请参阅***.com/questions/12158540/…）。

@Jay 如果较小的图像是最大图像的“裁剪”，您可以将最大的图像加载一次作为横幅的背景，并针对不同的屏幕尺寸使用背景大小和背景定位来防止加载几张图片。

你能改变每张图片的 z-index 或不透明度吗？这样他们就不必因为“显示：无”而重新加载。只是一个想法。

mobile.smashingmagazine.com/2013/07/22/…

【参考方案1】：

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

This的文章一定能帮到你。

【讨论】：

***.com/questions/9506069/…的可能重复

这确实有一个问题，如果用户打印网页，那么除非他们打开背景图像打印——默认情况下它是关闭的——否则图像不会出现。

在哪个设备或浏览器上？ @Jay

不是所有浏览器都这样吗？我知道 IE 是这样，我认为 Firefox 也是如此。我没有有意识地尝试过其他浏览器或设备。

等等，我帖子中的关键词是“打印”。是的，目前所有主要浏览器都支持背景图像。但是，当用户打印图像时，与将其显示在屏幕上相反，至少在某些浏览器中的默认行为是不打印背景图像。我推测“真正的”背景图像是一个背景，是一种装饰性的东西，它只会使打印的页面变得混乱。

【参考方案2】：

我会查看 Zurb Foundation 的 Interchange 以处理响应式图像。我发现的最好的跨浏览器方法。

http://foundation.zurb.com/docs/components/interchange.html