角度のある素材グリッドで画像の拡大/縮小

Question

私が作業している角度素材ベースのアプリケーションで、グリッドタイルの内側に画像を配置しようとしています。私の問題は、これらの画像がタイル内に「フィット」しないことです。以下は例です。私のイメージは大きく（2832x4256）、タイル内に収まるようにスケーリングするのではなく、コンテナ全体を引き継ぎます。グリッド内のそれぞれのタイルに収まるように画像を拡大するにはどうすればよいですか？

<md-grid-list md-cols-gt-md="3" md-cols-md="2" md-cols-sm="1" md-gutter="12px" md-row-height="1:1"> 
    <md-grid-tile class="green"> 
    <img src="resources/images/food-beer.jpg" alt="beer"> 
    <md-grid-tile-footer> 
     <h3>first tile</h3> 
    </md-grid-tile-footer> 
    </md-grid-tile> 
    <md-grid-tile class="blue"> 
    <md-grid-tile-footer> 
     <h3>second tile</h3> 
    </md-grid-tile-footer> 
    </md-grid-tile> 
    <md-grid-tile class="purple"> 
    <md-grid-tile-footer> 
     <h3>third tile</h3> 
    </md-grid-tile-footer> 
    </md-grid-tile> 
</md-grid-list> 

以下はその結果です。代わりに私が目指しているのは、画像が青と紫のタイルのそれぞれと同じ量のスペースを占めることです。

Answer 1

あなたはCSSで画像を標的とするか、背景画像として設定することでこれを行うことができますどちらか。

ここではCSSの方法でもですが、これは画像の幅に基づくアスペクト比のため、一部のブレークポイントでは画像がタイルの高さを埋めることができないためです。

.green img { 
    max-width: 100%; 
    height: auto; 
} 

だから、このメソッドは完全にクロスブラウザがサポートされていない多分少し良い背景画像と一緒に行くけど。

.green { 
    background-image: url('folder/your-image.png'); 
    background-size: cover; 
} 

Answer 2

あなたは彼らが矩形全体を占めるようにしたい場合は、私は、「レイアウトフィル」属性を使用しても、それを達成すると信じています。

<img src="resources/images/food-beer.jpg" alt="beer" layout-fill>