Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Responsive Images using Dynamic Base URL</title>
    
    <script>
    (function(){
      var assetPath = 'http://placehold.it/';
      
      if( screen.width < 480 ){
          assetPath += '240/';
      }
      else if( screen.width < 960 ){
          assetPath += '480/';
      }
      else if( screen.width < 1024 ){
          assetPath += '960/';
      }
      else {
          assetPath += '1024/';
      }
      assetPath += '00FF00/';
      document.write('<base href="' + assetPath + '">');
    })();
    </script>
    <!-- 
    According to HTML5, the following <base> element should be ignored, since only the first is recognized: 
    http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-base-element 
    -->
    <base href="http://placehold.it/1024/FF0000/">
​
    <style>
      .pass { color:green; }
      .pass:after { content:" (pass)"; }
      .fail { color:red; }
      .fail:after { content:" (fail)"; }
    </style>
  </head>
  <body>
    <h1>Responsive Images using Dynamic Base URL</h1>
    <p>Proof of concept for <a href="http://blog.keithclark.co.uk/responsive-images-using-cookies/#comment-16">Schepp's comment</a>  on Keith Clark's <a href="http://blog.keithclark.co.uk/responsive-images-using-cookies/">Responsive images using cookies</a>. No cookies needed!!! This works in Firefox and Chrome, but doesn't seem to work in Safari. (<a href="http://jsbin.com/ugodu3/edit">Edit jsbin</a>)</p>
    <p>Image src: <span id=src>Loading…</span></p>
    <img src="FFF.png&text=ResponsiveImage">
  </body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers