动态图像在响应网格中调整大小

时间:2014-05-06 00:10:05

标签: javascript image twitter-bootstrap responsive-design resize

我正在寻找一种稳定,快速的动态图像大小调整服务,它可以在响应式网格设计中运行。我运行一个网站,其中包含使用引导网格显示的大量照片。

我想以全分辨率上传图像,然后根据网格中的显示大小动态调整图像大小。图像显示为100%宽度,然后受自举网格单元大小的约束。有些是并排显示的,有些以容器宽度显示。

我目前使用http://ReSRC.it调整大小并投放我的图片。我指定一次URL,客户端的JS请求最合适的大小的图像。它们是我能找到的唯一使用图像显示尺寸的服务。视口大小与此处无关,因为如果网格折叠且图像不再并排显示,较小的视口实际上可能需要较大的图像。

我对ReSRC并不满意。我只想了解我的其他选择(特别是在速度/可靠性方面 - ReSRC的两个缺陷,IMO)。似乎CloudFlare的Mirage功能似乎做了类似的事情,但我找不到任何关于它是否使用视口或显示(是否有JS组件?)大小的信息。我不知道是否有CloudFlare astroturfs,但似乎服务上确实存在的任何信息都是一遍又一遍地重复的营销活动。

我见过的其他服务基于URL参数调整大小,但这对我没有帮助,因为在客户端加载之前我不知道图像的大小。这意味着我几乎只限于半JavaScript解决方案,对吧?

1 个答案:

答案 0 :(得分:0)

您需要Slimmage.js。它速度快,尊重CSS规则和断点,可访问,并且不会发出重复请求。

另见 Dynamic image resizing in the Cloud for Responsive website

相关问题