A web developer's blog. PHP, MySQL, CakePHP, Zend Framework, Wordpress, Code Igniter, Django, Python, CSS, Javascript, jQuery, Knockout.js, and other web development topics.

Using Javascript to Set the Image Width in Images with Responsive Layouts

The scenario

Let’s say you have an image 600 pixels wide, in responsive layouts, you have to set the image width to 100% – or else it will not “adjust” to changes in the window size.

On your desktop, the width of your window will be greater than 600 pixels, so the image will be stretched and will loose it’s quality – it will become pixelated/blurry. On your mobile device, when the screen is less than 600 pixels wide, a horizontal scroll bar will appear – you loose the responsiveness of your layout.

The work-around

To go around this problem, I would want to set the image width to 100% only when the window width is lesser than the image width. If the image width is lesser than window width, just display the image in it’s original size.

The code

<script language="javascript" type="text/javascript">
    function getOriginalWidthOfImg(img_element) {
        var t = new Image();
        t.src = (img_element.getAttribute ? img_element.getAttribute("src") : false) || img_element.src;
        return t.width;
    }
 
    function responsive_images () { 
        $(".responsive_img").each(function() {
            if(parseInt(getOriginalWidthOfImg(this)) >= parseInt($(window).width())) {
                $(this).attr("width","100%");
            } else {
                $(this).removeAttr("width");
            }
        });
    }
 
    $(window).load(function() {
        responsive_images();
        $(window).resize(function() {
            responsive_images();
        });
    });
 
</script>

Note: You will need jQuery.

Credits:
FDisk’s answer in Stackoverflow: http://stackoverflow.com/a/3192577/66767

This entry was posted in Uncategorized. Bookmark the permalink.

3 Responses to Using Javascript to Set the Image Width in Images with Responsive Layouts

  1. Johan Smits says:

    Dear Wenbert,

    My suggestion is to do this with css, so let’s say we have:

    for our images.

    In our css we declare:
    .figure img { max-width:100%; }

    As far as I know this works in all modern browsers (except IE6).

    Can you discuss the difference with your solution?

    Thank you for your posts, I appreciate them.
    Kind regards
    Johan Smits

  2. Johan Smits says:

    In the html my suggestion is to put a div around the responsive image.
    I don’t know how to put this in my comment so another try:

    ‹div class=”figure”›
    ‹img src=”mug-front.jpg”›
    ‹/div›

  3. Wenbert Del Rosario says:

    Hi Johan, you’re right it would be “cleaner” if it was in CSS. When I get the chance, I will test the CSS option for this.

    Thank you very much for the comments. Always good to see some inputs from someone ;)

Leave a Reply to Johan Smits Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>