![杀死]( "杀死")
本文介绍了带有溢出的 md-card-image:hidden + max-height 杀死 100% 宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
使用 Angular 2，我试图通过使用
部分显示封面图片img[md-card-image] {隐藏:溢出；最大高度:160px；}
然而，Angular 决定在溢出期间将图像装箱.我似乎无法弄清楚如何让图像填满卡片的整个顶部.
编辑 1
如果我不使用上面的 css，而是将包裹我的封面图像的 div 更改为 margin-bottom: -50%; 将文本向上移动到图像顶部；但是，在这种情况下，我无法为卡片上的内容设置背景.用于覆盖图像的文本部分.
解决方案
经过几天的尝试，我终于想出了一个解决方案.我不得不删除 md-card-image 并用 div 手动完成.我猜当您将 hidden: overflow 添加到容器时，材料设计 css 会弄乱它导致问题.
这是它的样子:
我的材质卡样式:
md-card {填充:0px；边距:20px；.cover-wrapper {宽度:100%；高度:160px；.封面图片 {顶部:0；左:0；宽度:100%；高度:100%；背景尺寸:封面；}}.cover-footer {背景颜色:rgba(255, 255, 255, 0.5);边距:-50px 0px 0px 0px;填充:10px；div[md-card-title] {字体粗细:粗体；宽度:100%；字体大小:$font-size-large；}}}
材质卡的html:
<div class="cover-wrapper" fxFlex><div class="cover-image" [style.background-image]="'url(' + _cover + ')' | safeStyle"></div>
<div class="cover-footer" fxFlex><div md-card-title fxFlex>{{ _title }}</div>
<md-card-content><div [innerHtml]="_text | safeHtml" id="markdown"></div></md-card-content></md-card>
Using Angular 2, I was trying to partly show a cover image by using
img[md-card-image] {
hidden: overflow;
max-heigth: 160px;
}
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.
Edit 1
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.
解决方案
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.
Here's what it looks like:
My styling for the material card:
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;
}
}
}
The html for the material card:
<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:hidden + max-height 杀死 100% 宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！