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

问题

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?

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

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.

回答2:

All I had to do in the end was wrap my image in a div tag. This div obviously breaks the Angular Material CSS rule that was in control of styling my image.

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

来源：https://stackoverflow.com/questions/35978716/how-do-i-stop-md-cards-from-stretching-images-to-full-vertical-height

标签

css

angularjs

material-design

angular-material