0

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

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

我想要一个<img>，并且我希望浏览器下载尽可能多的文件，以使其最佳显示。我想通过样式表对裁剪和缩放进行艺术指导。

我们应该鼓励浏览器根据需要下载和显示图像资源，还是应该在 Photoshop 中进行浏览器嗅探、复制和裁剪图像——因为这在今天有效？

4

2 回答 2

1

Depending on the specifics of what you want to achieve, here's one possiblitly that might work for you.

You start by using media queries to deliver different background images @ different viewports: 

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');
}    
}

Then you fine-tune the results by using full page background image techniques, eg
http://css-tricks.com/perfect-full-page-background-image/

Good luck!

于 2013-08-02T11:59:51.410 回答
0

对于当前的浏览器技术，您所问的并不是很可行。

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

但

  • 这将非常复杂

  • 如果用户调整浏览器窗口的大小，它会失败

  • 如果用户旋转移动设备失败

  • 非缓存友好

  • 等等

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

于 2013-08-02T10:11:32.717 回答