html - 使图像始终占据 800*400px 空间，即使尺寸较小(不放大)

Question

我正在使用 Jquery Lazy Load 插件在图像进入浏览器视口(viewport)时延迟加载图像。

在原始图像的位置，我只是放置了一个动画加载器 gif。但是，由于动画加载器 gif 和原始图像的尺寸不同，我看到原始图像的尺寸缩小了。

我想让加载器 gif 包含要放置的原始图像所使用的整个空间。 (loader gif 为 32*32 px & original img 为 800*400px)所以我希望由下面的代码呈现的图像应该始终占用 800*400px 空间，而加载器图像不会放大到该大小。我认为这是可能通过 CSS，但我不知道如何？你能指导我吗？

<img class='lazy' data-original='/module_files/l.jpg' src='/loader.gif'/>

Answer 1

http://jsfiddle.net/uNbMN/1/

有很多方法可以解决这个问题，但是只使用单个 img 标签而不使用 js 我认为没有很好的方法。您不能告诉 img 在其内部居中，因为您正在设置实际尺寸。你可以用两个类来做这样的事情。

img.lazy {
    height: 400px;
    width: 800px;
    border: 1px solid black;
}

img.loader {
    height: auto;
    width: auto;
    /*You would have to account for loader dimensions here*/
    padding: 200px 400px 200px 400px;
}

如果您真的想这样做，我会考虑将“loader”与图像完全分离，并将其放在自己的独立元素中。