Question

我试图完成与谷歌照片相同的布局，然后看到此页https://github.com/xieranmaya/blog/issues/6。我的问题是关于他的作品的最终输出，可以在这个页面上查看。 https://xieranmaya.github.io/images/cats/cats.html。当您检查其中一张照片时，您可以看到此行

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

我的问题是他用什么计算来获得flex-grow和flex-basis的值，因为教程中没有提到它？

Answer 1

在这里你可以看到使用jQuery我模拟了Angular版本中的flex增长效果。

$('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

纯粹的CSS实施谷歌照片

1 个答案: