html - 如何正确缩放 1x1px 图像？

Question

我有以下标记，它是一个 1x1px 透明 gif:

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

在加载真实图像之前，这是一个占位符图像。我知道图像的确切宽度和高度，但主要问题是该网站是响应式的。该图像当然有 max-width: 100%;。在一个 300 像素宽的列中，高度也变成了 300 像素，它不会通过保持纵横比来缩放。

有办法实现吗？

更新: http://jsfiddle.net/Kp3y2/1/

Answer 1

这是一个 javascript (jQuery) 解决方案，可以将 1x1 图像缩放到所需比例:

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

我为你写了这个小函数:

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(); 
});

它修复了加载和窗口调整大小时所有虚拟图像的图像大小。当然，它需要在图像上设置所有 w/h 属性。