Googleの純粋なCSS実装

Question

私はGoogleの写真と同じレイアウトを達成しようとしており、このページにはhttps://github.com/xieranmaya/blog/issues/6があります。私の質問は、このページで見ることができる彼の作品の最終的な出力についてです。 https://xieranmaya.github.io/images/cats/cats.html。あなたは写真の要素1を検査するときは、この行を見ることができます

<div ng-repeat="img in imgs" style="flex-grow:70.57291666666667;flex-basis:169.375px;" class="ng-scope"> 

    <img ng-src="stock-photo-34598868.jpg" src="stock-photo-34598868.jpg"> 
</div> 

私の質問はどのような計算、彼はそれがチュートリアルに言及していないので、フレックス成長し、フレックス・基礎の値を取得するために使用しましたか？ですか

Answer 1

ここでは、jQueryを使用して、角度バージョンで表示されているように、フレックス拡大効果をシミュレートすることがわかります。

$('img').each(function() { //Cycle all the images 
var img = $(this); 

//Apply flex settings 
img 
    .css('flex-grow', img.width() * 100/img.height()) 
    .css('flex-basis', img.width() * 240/img.height() + 'px'); 
}); 

Fiddle