在移动设备的响应式网页设计中放大和缩小图像的首选方法是什么？

Question

在响应式网页设计中放大和缩小图片的首选方法是什么？

不同屏幕尺寸的不同图像更好，还是我们应该上下缩放相同的图像？

考虑到网站的性能，哪个选项最好？

我需要跨浏览器方式在所有最新和旧的移动浏览器上工作。

Answer 1

Sencha.io Src是一个很好的解决方案（基于tinySrc）。

进行设备检测，然后根据设备屏幕尺寸提供缩放图像。

http://www.sencha.com/products/io/

Answer 2

@jitendra vyas，

为不同的屏幕尺寸缩放相同的图像并不是一件好事，但缩放图像对于响应式网页设计来说并不是一件坏事，你可能需要更改图像和图像。在某些特定分辨率下设计，如1024px＆amp; 480px因为它们也是tab＆amp;的分辨率移动设备。

有很多原因，如：

1）对于移动设备而言，要加载大尺寸图像。

2）为不同的分辨率缩放单个图像在某些时间点变得难看，特别是对于较大的图像。

有一些参考网站链接可以帮助您巧妙地使用图像。

http://thinkvitamin.com/

http://colly.com/

http://css-tricks.com/

＆安培;关于它的文章http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Answer 3

我正在考虑编写一个小的jQuery插件，根据容器的大小通过ajax加载图像。但请随意窃取我的想法。 （如果你完成它，请在这里提一下。）; - ）