响应设计：不同的图像不同的屏幕尺寸 [英] 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.

这是最好的方法是什么？

What is the best way to do this?

我的第一个想法是包含所有三个图像，并使用@media最小/最大宽度，使其中两个在任何给定大小都不可见。 Like：

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.

任何人都这样做，并且有一些想法，最好的方法吗？您可以在中使用css background 。

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

推荐答案

媒体查询。

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.

这篇文章一定会帮助你。

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