MD-カード画像オーバーフローで：隠された+最大高さは角2を使用した100％の幅

Question

を殺し、私は一部しかし、角度がボックスと判断

img[md-card-image] { 
    hidden: overflow; 
    max-heigth: 160px; 
} 

を使用して表紙画像を表示しようとしていましたオーバーフロー時に内部の画像。私はイメージがカードの上全体を満たす方法を把握しているように見えることはできません。

編集1

私は上記のCSSを使用し、代わりに画像の上にテキストを上に移動しmargin-bottom: -50%;に私の表紙画像をラップのdivを変更しない場合。しかし、この場合、カード上のコンテンツの背景を設定することはできません。イメージの上を走るテキストの部分のために。

Answer 1

さまざまなことを試してみた後、私はついに解決策を思いつきました。私はmd-card-imageを削除し、手動でdivでそれをしなければならなかった。私はコンテナにhidden: overflowを追加すると、問題を引き起こしている材料設計CSSがそれを乱していると思います。ここで

は、それは次のようになります。

材料カードのための私のスタイル：

md-card { 
    padding: 0px; 
    margin: 20px; 

    .cover-wrapper { 
     width: 100%; 
     height: 160px; 

     .cover-image { 
      top: 0; 
      left: 0; 
      width: 100%; 
      height: 100%; 
      background-size: cover; 
     } 
    } 

    .cover-footer { 
     background-color: rgba(255, 255, 255, 0.5); 
     margin: -50px 0px 0px 0px; 
     padding: 10px; 

     div[md-card-title] { 
      font-weight: bold; 
      width: 100%; 
      font-size: $font-size-large; 
     } 
    } 
} 

HTML材料カードのために：

<md-card class="mat-elevation-z2" mat-whiteframe="8" fxLayout="column"> 
    <div class="cover-wrapper" fxFlex> 
     <div class="cover-image" [style.background-image]="'url(' + _cover + ')' | safeStyle"></div> 
    </div> 
    <div class="cover-footer" fxFlex> 
     <div md-card-title fxFlex>{{ _title }}</div> 
    </div> 
    <md-card-content> 
     <div [innerHtml]="_text | safeHtml" id="markdown"></div> 
    </md-card-content> 
</md-card>