响应式图片

标签：

在不同的屏幕下，img使用不同的图片资源，已达到响应式图片的效果。
HTML的部分：
<picture>
  <source media="(min-width: 650px)" srcset="http://www.w3cplus.com/sites/default/files/blogs/2015/1509/kitten-large.png">
  <source media="(min-width: 465px)" srcset="http://www.w3cplus.com/sites/default/files/blogs/2015/1509/kitten-medium.png">
  <!-- img tag for browsers that do not support picture element -->
  <img src="http://www.w3cplus.com/sites/default/files/blogs/2015/1509/kitten-small.png" alt="a cute kitten" id="picimg">
 </picture>

js部分：
(function() {
 var currentSrc,oldSrc, imgEl; 
 var showPicSrc = function() { 
  oldSrc = currentSrc; imgEl = document.getElementById(‘picimg‘); 
  currentSrc = imgEl.currentSrc || imgEl.src; 
  if (typeof oldSrc === ‘undefined‘ || oldSrc !== currentSrc) { 
    document.getElementById(‘logger‘).innerHTML = currentSrc; 
  } }; 
 window.addEventListener(‘resize‘, showPicSrc); 
 window.addEventListener(‘load‘, showPicSrc); })(window);

注：srcset方案目前还在讨论和完善中，但是可以预见，我们将会有一个可靠的技术方案和标准。

响应式图片

标签：

原文地址：http://www.cnblogs.com/will-2008/p/4845801.html