How to properly scale an 1x1px image?

Question

I'm having the following markup which is an 1x1px transparent gif:

<img class="dummy" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="600" height="2867">

This is a placeholder image until the real image is loaded. I know the exact width and height of the image, but the main issue is that the site is responsive. The image has max-width: 100%; of course. In a 300px width column the height is becoming also 300px, it won't scale by keeping the aspect-ratio.

Is there a way to achive this?

UPDATE: http://jsfiddle.net/Kp3y2/1/

Answer 1

Here is a javascript (jQuery) solution that works to scale an 1x1 image to desired proportions:

http://jsfiddle.net/Kp3y2/16/

I wrote this little function for you:

function resizeDummies()
{
    $('img.dummy').each(function()
    {
        var i = $(this);
        var iw = i.attr('width');
        var ih = i.attr('height');
        var pw = i.parent().width();
        var h = Math.round(pw*ih/iw); // calculates "fluid" height
        i.width(pw); // sets width = 100% of parent
        i.height(h); // sets height = as image proportions but scaled
    });
}
$(function() 
{ 
    resizeDummies(); 
});
$(window).resize(function() 
{ 
    resizeDummies(); 
});

It fixes image sizes for all dummy images both on load and on window resize. Of course it requires all w/h attributes to be set on the images.

Answer 2

did you try with css?

img{
   width:100px;
   height: 100px;
}

Answer 3

Here is CSS

CSS

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}