带有溢出的md-card-image:隐藏+最大高度杀死100％宽度 [英] md-card-image with overflow:hidden + max-height kills 100% width

问题描述

使用Angular 2，我试图通过使用

Using Angular 2, I was trying to partly show a cover image by using

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

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

However, Angular decides that it boxes the image inside during the overflow. I cannot seem to figure out how to get the image fill the whole top of the card.

编辑1

如果我不使用上述CSS，而是将包裹封面图像的div更改为margin-bottom: -50%;，这会将文本移到图像上方；但是，在这种情况下，我无法为卡上的内容设置背景.覆盖图片的文字部分.

If I do not use the above css, and instead change the div which wraps my cover image to margin-bottom: -50%; which moves the text up on top of the image; however, in this case, I cannot set a background to the content on the card. for the part of the text that runs over the image.

推荐答案

经过数天的尝试，我终于找到了解决方案.我必须删除md-card-image并使用div手动进行.我想将hidden: overflow添加到容器时，材质设计css会使其混乱，从而导致问题.

After days of trying different things, I finally came up with a solution. I had to remove the md-card-image and manually do it with divs. I guess the material design css is messing with it causing the issue when you add the hidden: overflow to the container.

这是它的样子:

我的物料卡样式:

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>

这篇关于带有溢出的md-card-image:隐藏+最大高度杀死100％宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！