近期Responsive web design项目经验分享-高分辨率图片处理篇

在高分辨率的情况下 商品的图片难免会失真

怎样才能让商品的图片在高分辨率的情况下 效果不失真 提供用户更好的体验呢

我发现了一个解决方案 不知道是不是你想要的

先上图片对比下效果


左侧是使用后 右侧是使用前

差距还是比较大的

感兴趣的小伙伴 可以下载源码 自己尝试一下

https://github.com/scottjehl/picturefill

PICTUREFILL

The Web is truly worldwide, and we have to confront the fact that not everyone has access to fiberoptic connections and 4G networks. Scott Jehl encountered this digital divide first-hand while travelling and working his way through Southeast Asia, and he is a strong advocate of mobile-first and responsive websites that don’t put an undue burden on mobile users. His Picturefill script is a polyfill for the proposed

<picture>

element — JavaScript code that mimics the picture API, enabling us to use it on our websites today. The future is now, baby!



Picturefill does not require jQuery, but obviously it does require the

picturefill.js

script to be included somewhere in the page. Picturefill also requires some special markup, with divs to represent the image variations, differentiated by

data-media

attributes that act just like media queries in CSS. You may also optionally put an image in conditional comments for browsers that don’t support media queries (I’m looking at you, IE 8), and a fallback in a

<noscript>

tag for browsers that don’t have JavaScript enabled (I’m looking at you, BlackBerry).

Here’s an example of a typical Picturefill setup:

<span data-picture data-alt="Descriptive alt tag">
<span data-src="images/myimage_sm.jpg"></span>
<span data-src="images/myimage_lg.jpg" data-media="(min-width: 600px)"></span>

<!--[if (lt IE 10) & (!IEMobile)]>
<span data-src="images/myimage_sm.jpg"></span>
<![endif]-->

<!-- Fallback content for non-JS browsers. -->
<noscript>
<img src="images/myimage_sm.jpg" alt="Descriptive alt tag" />
</noscript>
</span>

[/code]
That’s all you need to display adaptive images at page-loading time using Picturefill. Drop in the script, configure the markup, and everything just works. You can also call Picturefill programmatically if you need to add images to the page on the fly.

Picturefill requires a lot of custom markup, so it might not be the best choice for those who cannot alter their website’s source code for any reason. It also doesn’t do any bandwidth detection. If bandwidth detection is important to your project, then have a look at this next solution.

An img with "srcset" and sizes" attributes:

<img sizes="(min-width: 40em) 80vw, 100vw"
srcset="../examples/images/medium.jpg 375w, ../examples/images/medium.jpg 480w, ../examples/images/large.jpg 768w" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">