Question

我有以下标记，即1x1px透明gif：

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

这是占位符图像，直到加载实际图像。我知道图像的确切宽度和高度，但主要问题是网站是响应式的。当然，图片有max-width: 100%;。在300px宽度的列中，高度也变为300px，它不会通过保持宽高比而缩放。

有没有办法实现这个目标？

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

Answer 1

这是CSS

<强> CSS

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

Answer 2

你试过用css吗？

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

Answer 3

这是一个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属性。

如何正确缩放1x1px图像？

3 个答案: