View Single Post
Old 20th January 14, 03:11 PM   #5
Phreaddee
WLC Lover
 
Phreaddee's Avatar
 
Join Date: Oct 2010
Location: Newcastle, NSW, Australia
Posts: 768
Default Re: Questions on image resize

if it's for a client to update this isn't the solution, but if you've got the time and the energy to make the multitude of images and use the picturefill.js this works a treat, tested on a stack of devices...

Code:
<div id="container">
<span data-picture data-alt="ALT GOES HERE">
        <span data-src="images/small.png"></span>
        <span data-src="images/smallx2.png"      data-media="(-webkit-min-device-pixel-ratio: 2.0)"></span>
        <span data-src="images/smallx3.png"      data-media="(-webkit-min-device-pixel-ratio: 3.0)"></span>
        <span data-src="images/medium.png"        data-media="(min-width: 640px)"></span>
        <span data-src="images/mediumx2.png"     data-media="(min-width: 640px) and (-webkit-min-device-pixel-ratio: 2.0)"></span>
        <span data-src="images/large.png"         data-media="(min-width: 960px)"></span>
        <span data-src="images/largex2.png"      data-media="(min-width: 960px) and (-webkit-min-device-pixel-ratio: 2.0)"></span>
        <span data-src="images/extra-large.png"    data-media="(min-width: 1280px)"></span>
        <span data-src="images/extra-largex2.png" data-media="(min-width: 1280px) and (-webkit-min-device-pixel-ratio: 2.0)"></span>

        <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
        <noscript>
            <img src="images/medium.jpg" alt="ALT GOES HERE" />
        </noscript>
    </span>

</div>
Phreaddee is offline   Reply With Quote