Question

我知道较小的屏幕不需要美丽的加勒比海日落的大型2000px宽.jpg图像。具体：我的诺基亚手机和我的带宽决定了用户体验的极限。这是关于加载时间。

有些人希望将较小的屏幕尺寸提供给不同的较小图像。他们希望提供不同的资源（例如每<picture>个元素），我不希望这样，因为我知道它只是我想要为用户提供的一个图像。

我想要一个<img>，我希望浏览器下载尽可能多的文件，以便最佳地显示它。我想通过样式表来指导裁剪和缩放。

我们是否应该鼓励浏览器根据需要下载和显示图像资源，或者我应该在浏览器中进行浏览器嗅探和复制以及裁剪我的图像 - 因为今天有效吗？

Answer 1

根据您想要实现的目标的具体情况，这里有一个可能适用于您的方法。

首先使用媒体查询在不同的视口中传递不同的背景图像：

CSS  
body{
background-image:url('desktop.jpg');
}  

@media (min-width: 768px) and (max-width: 979px) {
body{
background-image:url('tablet.jpg');
}  
}  

@media (max-width: 768px) {
body{
background-image:url('smartphone.jpg');
}    
}

然后，您使用整页背景图像技术微调结果，例如
http://css-tricks.com/perfect-full-page-background-image/

祝你好运！

Answer 2

使用当前的浏览器技术，你所要求的并不是很可行。

理论上，您可以使用JavaScript嗅探屏幕尺寸，使用宽度和高度信息设置背景图像URL，然后在服务器端裁剪图像以匹配这些尺寸。

但是

这将是完全复杂的
如果用户调整浏览器窗口大小
如果用户轮换移动设备，则会失败
非缓存友好
等

我的建议是使用自适应CSS布局。 http://mobile.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-backgrounds/

通过裁剪响应背景图像

2 个答案: