响应式设计:不同屏幕尺寸的不同图像 [英] Responsive design: different images for different screen sizes

问题描述

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

Our client wants to have a different banner image on smaller screens than on larger screens. Not just shrink/stretch to fit, but actually substitute a different image. The full-size image is fairly complex -- several people, two logos, and some decorative text -- and so for the smaller image they want to crop out some of the people, drop the logos, etc. So they want the biggest, most complex image for desktops, a smaller simpler image for mid-size devices, and then smaller and simpler still for the smallest.

最好的方法是什么?

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

My first thought is to include all three images, and use @media min/max widths to make two of them invisible at any given size. Like:

@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} }

这应该可行，但它每次都会下载所有三个图像，这似乎很浪费带宽.

This ought to work but it would download all three images every time, which seems rather a waste of bandwidth.

我可以将图像从 img 标签更改为 css 背景图像.那会更好吗?这会避免下载所有三个还是仍然这样做?

I could change the images from img tags to css background images. Would that be better? Would that avoid downloading all three or would it still do that?

我正在考虑编写一些 JavaScript 来根据屏幕大小动态更新 img 标签中的 URL，但这似乎很复杂.

I was thinking of writing some JavaScript to dynamically update the URL in the img tag based on the screen size, but that seems like a bunch of complexity.

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

I briefly thought of making the logos and text separate images and breaking the actual picture into pieces and then trying to assemble them all as overlapping images. But that sounds like a lot of work to get right, and then I'd have to make sure it looks right at all possible sizes, not so easy to just shrink or stretch, etc. And while it's probably do-able in this particular case, I'd prefer a general solution that I can use in the future.

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

Anybody done something like this and have some ideas about the best way to do it?

推荐答案

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

you may use css background in media queries. The images are only loaded if the CSS requires it to be, so if nothing matches the selector then it won't bother loading the image.

这篇文章一定会对您有所帮助.

This article will surely help you.

这篇关于响应式设计:不同屏幕尺寸的不同图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！