简体繁体 English

保持质量的jQuery响应式图像大小调整方法

[英]Jquery responsive image resizing method that maintains the quality

原文 2014-05-22 09:57:31 4 1 javascript/ jquery/ css/ image

I have a background image which is responsive. 我有响应的背景图片。 It adapts to the container with the background-size: 100% method which keeps the aspect ratio. 它使用背景尺寸：100％的方法适应容器，该方法可以保持宽高比。 However, for older browsers like Firefox 18 and below and all versions of internet explorer I get a bad image when scaled (jagged or blurry). 但是，对于较旧的浏览器（如Firefox 18及更低版本）以及所有版本的Internet Explorer，缩放后（锯齿状或模糊），我会得到不良图像。 I tried the css bicubic interpolation (internet explorer) and "image-rendering" (firefox) fix yet no effect what can be observed. 我尝试了CSS双三次插值（Internet Explorer）和“图像渲染”（Firefox）修复，但没有效果。

My question is: is there a jquery or javascript way that does the same job while preserving the quality? 我的问题是：是否有一种jquery或javascript方式在保持质量的同时做同样的工作？ Like a browser independent scaling method. 就像浏览器无关的缩放方法。 Googled but found nothing. 谷歌搜索，但一无所获。

I know this is not ideal in terms of speed and I should instead do the resizing in my image editing software but this is not an option in my scenario. 我知道这在速度方面不是理想的，我应该在图像编辑软件中进行大小调整，但这在我的方案中不是一个选择。

Would be happy to hear about your answers, 很高兴听到您的回答，

Sincerely, 此致

Michael 迈克尔

1 个解决方案

The only good solution I found to provide the best possible quality is by using a css responsive method. 我发现提供最佳质量的唯一好的解决方案是使用CSS响应方法。

For latest chrome & safari you have the new HTML attribute SRCSET. 对于最新的chrome和safari，您具有新的HTML属性SRCSET。 For olders browsers, you can use your images as a div background and change it dynamically with CSS only. 对于较旧的浏览器，您可以将图像用作div背景，并仅使用CSS动态更改它。

For very old browsers, the only way is to grab images with different sizes using JS... 对于非常老的浏览器，唯一的方法是使用JS捕获不同大小的图像。