如何正确缩放 1x1px 图像？答案

【问题标题】：How to properly scale an 1x1px image?如何正确缩放 1x1px 图像？
【发布时间】：2014-01-20 21:12:33
【问题描述】：

我有以下标记，它是一个 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/

【问题讨论】：

我猜你不能没有javascript。浏览器根据原始图像的比例缩放图像。但是你可以有一个 1x5 像素的透明 gif，应该可以工作......
是的，但是宽高比并不总是1:5，也可以是3:2这样的水平图像。我也在考虑图像的 onload 事件，而不是用 JS 按父宽度计算，但这是一个丑陋的解决方案，正在寻找更清洁的解决方案。
但是如果你知道图片加载前的 w/h 那么你可以让占位符与原始图片的比例相同吗？我的意思是不同的适应每个图像？
但是续流是流动的......
是的，这就是我的意思。但是占位符图像本身必须与真实图像具有相同的比例，而不是 1x1。见这个例子jsfiddle.net/bVSTD

标签： html css image responsive-design aspect-ratio

【解决方案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 属性。

【讨论】：

我决定使用另一种显示方法，因为这只能通过 JavaScript 实现。无论如何我接受了你的回答。谢谢。

【解决方案2】：

你试过css吗？

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

【讨论】：

当然，我只是想给出一个想法。我认为 Goombah 会发送更多特殊代码。

【解决方案3】：

这里是 CSS

CSS

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

【讨论】：

图片的最大宽度：100%；
它已经是自动的了，但似乎你不明白，我正在整理一个 JSFiddle...
没有。我还在帖子中添加了一个小提琴。
尝试将 .item 宽度设置为 5%