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

最后我要做的就是将我的图片包裹在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>
}

Answer 2

角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">

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

如何阻止md卡从图像拉伸到垂直高度？

问题

2 个答案: