带有溢出的 md-card-image:hidden + max-height 杀死 100% 宽度

Question

使用 Angular 2，我尝试使用

部分显示封面图像

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

但是，Angular 决定在溢出期间将图像装箱。我似乎无法弄清楚如何让图像填满卡片的整个顶部。

编辑 1

如果我不使用上面的 css，而是将包含我的封面图像的 div 更改为 margin-bottom: -50%; ，这会将文本向上移动到图像顶部；但是，在这种情况下，我无法为卡片上的内容设置背景。对于在图像上运行的文本部分。

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>