サイズが小さくても（拡大せずに）、イメージは常に800 * 400ピクセルの領域になります。

Question

ブラウザのビューポートに来るときに、画像を遅延ロードするためにJquery Lazy Loadプラグインを使用しています。

元画像の代わりに、アニメーションローダーgifを配置します。しかし、アニメ化されたローダーgifの寸法に違いがあるので&元のイメージは元のイメージが縮小されています。

ローダーgifを配置する元の画像で使用されていたスペース全体を保持するようにします。 （ローダーgifは32 * 32 px &オリジナル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/

があり、これを解決する方法はたくさんありますが、1つだけimgタグと私は非常に良い方法があるとは思わない無JSを使用します。あなたは実際の寸法を設定しているので、あなた自身の中心にimgを置くことはできません。あなたは2つのクラスでこれを行うことができます。

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

あなたが本当にこれをしたい場合は、私は完全にイメージから「ローダー」を分離し、独自の、別の要素でそれを配置することを検討します。