响应式设计:不同屏幕尺寸显示不同图像

问题描述 投票:0回答:3

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

最好的方法是什么?

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

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

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

html css image responsive-design
3个回答
4
投票

您可以在

background
中使用 css
media queries
。仅当 CSS 要求时才会加载图像,因此如果没有任何内容与选择器匹配,则不会加载图像。

这篇文章一定会对你有帮助。


1
投票

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

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


0
投票

为特定的屏幕尺寸或方向指定不同的图像现在已成为 HTML 标准的一部分。您可以使用

srcset
picture/source
 元素上的 
img
属性提供多个图像源。

MDN 上的本指南提供了有用的概述:

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

© www.soinside.com 2019 - 2024. All rights reserved.