如何阻止 md-cards 将图像拉伸到完全垂直高度? [英] How do I stop md-cards from stretching images to full vertical height?

问题描述

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

仔细观察后，我的图像似乎被拉伸到了最大高度.

我的代码:

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

@foreach(模型中的变量项){<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><小时/><md-chips>@foreach(item.Tags 中的 var 标签){<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())

<md-button>@Html.ActionLink("查看帖子", "查看帖子", "帖子", new { id = item.Id, slug = item.URL }, null)</md-button></md-card-actions></md-card>}

问题

如何阻止我的图像拉伸到其高度的 100%?

解决方案

angular-material.scss

md-card{>图像，>:not(md-card-content) img {box-sizing: 边框框；显示:弹性；弹性:0 0 自动；宽度:100%；高度:100%！重要；}}

因此，由于 100% !important 高度值，您不能在内联样式中覆盖高度.所以我建议将此行更改为

高度:100%

(适当的 css 文件是 angular-material.css 只需搜索)和

  item.ImageUrl)" class="md-card-image" alt="Washed Out" height="150">

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

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.

My Code:

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>
}

Question

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

解决方案

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;
 }
}

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

height: 100%

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

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

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