5

md-grid-list を石積みスタイルで実装しようとしていますが、表示を伸ばす行数を決定する必要があるようです。

行と列の比率が常に機能するとは限らないように、比率が異なるさまざまな画像を表示したい（ピンタレストを考えてください）。写真をトリミングしたりストレッチしたりせずに、マテリアル デザインでこれを行う方法はありますか?

PS : 私は Disandro の石積みを知っています。私は純粋な材料設計ソリューションを探しています。

ここからコードを再利用しました: https://material.angularjs.org/#/demo/material.components.gridList

ありがとう

4

2 に答える 2

3

クズミ、あなたは天才ですこのようなことはうまくいきました（改善する必要があります）

1- md-grid-list をコンテナーの幅と同じ列数にします

2- md-rowspan と md-colspan には画像のサイズが必要です。改善すべき点があると確信しています（ウィンドウのサイズ変更など...しかし、アイデアはそこにあります）

あなたの考えを聞いてうれしい

<md-grid-list md-cols="1133" md-row-height="1:1">
<md-grid-tile ng-repeat="i in images" md-rowspan="{{i.h}}" md-colspan="{{i.w}}">
  <img ng-src="{{i.src}}"/>
  <md-grid-tile-footer>
    <h3>{{i.title}}</h3>
  </md-grid-tile-footer>
</md-grid-tile>

于 2015-06-19T12:49:23.020 に答える