MD卡圖像與溢出：隱藏+最大高度殺死100％的寬度

採用了棱角分明2，我試圖用MD卡圖像與溢出：隱藏+最大高度殺死100％的寬度

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

但是部分顯示的封面圖片，角度決定它框裏面的圖像溢出。我似乎無法弄清楚如何讓圖像填滿整個卡片的頂部。

編輯1

如果我不使用上述CSS，而是改變它包裝我的封面圖像margin-bottom: -50%;移動該文本上來就圖像的頂部股利;但是，在這種情況下，我無法爲卡上的內容設置背景。對於在圖像上運行的部分文本。

來源

2017-04-20 flamusdiu

經過幾天嘗試不同的事情，我終於想出了一個解決方案。我不得不刪除md-card-image並手動使用div。我想材料設計的css是搞亂了它，導致這個問題，當你添加hidden: overflow到容器。

這裏是什麼樣子：

我對物料卡樣式：

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>

來源

2017-04-30 16:00:55 flamusdiu

MD卡圖像與溢出：隱藏+最大高度殺死100％的寬度

回答

相關問題