如何从图像拉伸到全垂直高度停止MD-卡？ [英] How do I stop md-cards from stretching images to full vertical height?

问题描述

我与角料在我的个人博客试验和我决定试试我的主页上实现卡。一切看起来都在我的MacBook伟大的，但是当我查看Windows机器上的页面我的图像垂直拉伸。

I'm experimenting with Angular Material on my personal blog and I've decided to try implementing cards on my main page. Everything looks great on my macbook but when I view the page on a windows machine my images are stretched vertically.

找一个近一点之后，似乎我的图像被拉伸到其全高。

After looking a bit closer, it seems that my images are being stretched to their full height.

我的code：

我在ASP.NET剃刀这样查看像这样：

I'm doing this in an ASP.NET Razor view like so:

@foreach (var item in Model)
{
    <md-card>
        <img src="@Html.DisplayFor(modelItem => item.ImageUrl)" class="md-card-image" alt="Washed Out">
        <md-card-title>
            <md-card-title-text>
                <span class="md-headline">@Html.DisplayFor(modelItem => item.Title)</span>
            </md-card-title-text>
        </md-card-title>
        <md-card-content>
            <p>
                @Html.DisplayFor(modelItem => item.Description)
            </p>
            <hr />
            <md-chips>

                @foreach (var tag in item.Tags)
                {
                    <md-chip>@tag.Name</md-chip>
                }
            </md-chips>
        </md-card-content>
        <md-card-actions layout="row" layout-align="space-between center">
            <div class="md-body-2 lightgrey">
                @String.Format(item.Created.ToLongDateString())
            </div>
            <md-button>@Html.ActionLink("View Post", "ViewPost", "Posts", new { id = item.Id, slug = item.URL }, null)</md-button>
        </md-card-actions>
    </md-card>
}

问题

我如何从伸展自己的身高为100％，停止我的图片？

Question

How do I stop my images from stretching to 100% of their height?

推荐答案

角material.scss

angular-material.scss

md-card{

> img,
> :not(md-card-content) img {
box-sizing: border-box;
display: flex;
flex: 0 0 auto;
width: 100%;
height: 100% !important;
 }
}

所以，因为高度 100％！重要价值不能覆盖的内联样式的高度。所以我会建议此行更改为

So because of the 100% !important of height value you can not override height in inline styling. so I would suggest to change this line to

高度：100％

（在适当的CSS文件角material.css只是搜索的）
和

(appropriate css file is angular-material.css just search for that) and

    <img src="@Html.DisplayFor(modelItem => item.ImageUrl)" class="md-card-image" alt="Washed Out" height="150">

使用高度属性定义每个 IMG 元素为内联的高度。

define height of each img element as inline using height attribute.

这篇关于如何从图像拉伸到全垂直高度停止MD-卡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！