画像のアスペクト比が容器にある

Question

私も同様の質問があることは知っていますが、それらはすべて古く、新しいテクニックがあるのか​​もしれません。

私は、次のHTML持っている：私は必要なもの

<figure class="main-slider__slide"> 
<img class="main-slider__image" src="http://smth.com/a.jpg" alt="test"> 
</figure> 

は、それがまだロードされていないながらimgのための部屋を保つfigureコンテナです。スペースを保持しているコンテナなしでは、私はひどい気分になるコンテンツをつまむことになります。

は、これまでのところ私は、次のSASSのミックスインを思い付いてきました：

@mixin image-placeholder($x,$y, $image-wrapper-class,$image-class) { 
    .#{$image-wrapper-class} { 
    position: relative; 
    padding-bottom: percentage($y/$x); 
    } 

    .#{$image-class} { 
    position: absolute; 
    } 
} 

ビーイングが、それは問題は、私はのサイズをハードコア必要があるということです

.main-slider__slide { 
    position: relative; 
    padding-bottom: 34.61538%; 
} 

.main-slider__image { 
    position: absolute; 
} 

のようにCSSを生成@include image-placeholder(1170, 405, main-slider__slide, main-slider__image);のように適用されますスタイルの私のイメージと、特定の次元のすべてのイメージのための別のクラスを持っています。 1つの一般的なプレースホルダークラスが問題を解決する良いソリューションを皆さんは知っていますか？

Answer 1

私が上記のコメントに書いたように、まだ読み込まれていない要素に関する情報を得ることができる一般的な解決方法があるのか​​どうかは疑問です。

しかし、このような動作を模倣することは可能かもしれません。

念頭に置いておくべきことの1つは、ドキュメントにインライン化されてページロード時に実際のイメージに置き換えられるように、読み込まれるイメージのサイズ変更されたバージョンを小さくすることです。例えば。あなたの1170x405画像は、20x倍率で50x20倍に圧縮されます。これは、〜1kbの画像サイズをjpegで表示します。このイメージは<img src="data:" class="image-placeholder">として直接ドキュメントに保存され、実際のイメージの一時的な置き換えとして動作します。 CSSを使用して元のサイズに拡大縮小し、元の画像をJavaScriptまたはブラウザに表示せずに読み込んだり、プレースホルダのすぐ上に置いたりすることで、元の画像を読み込むことができます。 filter: blur(10px)またはこのようなものを画像プレースホルダに適用すると、醜く見えないので便利です。実際には、このフィルタ値をアニメートして、縮小されたプレースホルダから元の画像に向かって快適な視覚的な遷移を提供することさえできます。

私はこのようなアプローチを私のプロジェクトの1つに使用しており、うまくいきました。

ご希望の場合はお手数ですが、