如何阻止 md-cards 将图像拉伸到完全垂直高度？

Question

我正在我的个人博客上试验 Angular Material，我决定尝试在我的主页上实现卡片。在我的 macbook 上一切看起来都很棒，但是当我在 windows 机器上查看页面时，我的图像被垂直拉伸。

仔细看了一下，我的图片好像被拉长了。

我的代码：

我在 ASP.NET Razor 视图中这样做：

@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%？

Answer 1

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% !important 的高度值，您无法在内联样式中覆盖高度。所以我建议将此行更改为

height: 100%

（合适的 css 文件是 angular-material.css 就搜索那个）

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

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

Answer 2

最后我所要做的就是将我的图像包裹在 div 标签中。 div 显然违反了控制图像样式的 Angular Material CSS 规则。

@foreach (var item in Model)
{
    <md-card>
        <!-- add div tag here! -->
        <div>
            <img src="@Html.DisplayFor(modelItem => item.ImageUrl)" class="md-card-image" alt="Washed Out">
        </div>
        <!-- end div tag here! -->
        <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>
}

如何阻止 md-cards 将图像拉伸到完全垂直高度？

How do I stop md-cards from stretching images to full vertical height?

css

angularjs

material-design

angular-material

问题