Question

我正在使用jQuery Lazyload Plugin。在加载图像之前，我使用虚拟图像作为占位符，这是一个20x20像素的空白PNG。我也在使用jQuery wookMark这是一个动态网格插件。要使此插件正常工作，我需要使图像具有正确的宽高比，以便插件可以计算页面中每个网格元素的合适位置。

我将width标记上的height和img属性设置为正确的尺寸，但这对虚拟图像没有任何影响，它将显示为正方形，无论如何。

我可以使用内联样式为每个图像设置宽度和高度，但这种方法会阻止图像在其他维度上响应。

有没有办法以一种像真实尺寸的方式给出图像的宽度和高度？

Answer 1

你要获得你想要的唯一方法就是使用一些javascript。你已经在使用jQuery了，这样会让它更容易一些。

使用以下CSS开始（作为示例）：

.myImage {
    width: 300px;
    height: 400px;
}

然后加载图像时（我假设某种回调函数）：

$('.myImage').css('width','100%');
$('.myImage').css('height','auto');

或者，您可以使用具有此高度和宽度的placeHolder css类，然后使用$('myImage').removeClass('placeHolder');从图像中清除它。

Answer 2

我找到了一个很好的方法。它不会是纯粹的CSS，但对我来说没问题：）

我的解决方案是将图片height设置为0并使用padding-bottom来保持宽高比：

<img src="./blank.png" style="height:0;padding-bottom:133.333%">

在加载实际图片时，class标记也有img：

img.loaded {
    height:auto !important;
    padding-bottom:0 !important;
}

希望你觉得它很有用。