Как мне остановить md-cards от растягивания изображений до полной высоты по вертикали?

Я экспериментирую с 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% их высоты?


material-design css angularjs angular-material
person Dan Beaulieu    schedule 14.03.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

определить высоту каждого элемента img как встроенную, используя атрибут height.

person nextt1    schedule 14.03.2016
comment
Я использую последнюю версию (1.1.0). Но в вашем случае вы можете напрямую определить атрибут height в теге img, иначе будет работать inline css. - person nextt1; 14.03.2016
comment
Добавление конкретного атрибута высоты действительно работает, однако оно противоречит цели шаблонов динамического содержимого. Я приму это как ответ, потому что это действительно помогает решить проблему, о которой я спрашивал, но я не думаю, что пойду по этому пути. Если я найду лучшее решение, я отпишусь. Спасибо за ваше время. - person Dan Beaulieu; 14.03.2016
comment
Если вы сделаете все свои изображения подходящего размера, вам не нужно будет использовать этот подход, плюс я уверен, что разработчики придумают что-то конкретное. - person nextt1; 14.03.2016
comment
Это просто тестовые изображения, однако я должен иметь возможность добавлять изображения любого размера, который я хочу, и легко подгонять их. Это обычная задача, и я делал это в своем CSS в прошлом. Очевидно, что мне здесь чего-то не хватает с угловым материалом. - person Dan Beaulieu; 14.03.2016
comment
Ага. Эта библиотека все еще находится на ранней стадии. Я уверен, что они добавят это будущее - person nextt1; 14.03.2016
comment
Я понял. Мне просто нужно было обернуть мой тег img тегом div, чтобы нарушить правило CSS Angular Materials. Я оставлю ваш ответ выбранным, так как уверен, что он будет полезен другим в будущем, плюс я не люблю принимать свои собственные ответы. еще раз спасибо. - person Dan Beaulieu; 14.03.2016

arrow_upward
4
arrow_downward

Все, что мне нужно было сделать в конце концов, это обернуть мое изображение тегом div. Этот div явно нарушает правило CSS Angular Material, которое контролировало стиль моего изображения.

@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>
}
person Dan Beaulieu    schedule 14.03.2016
comment
У вас возникла моя проблема после того, как вы добавили заголовок div: stackoverflow.com/questions/43527005/ ? - person flamusdiu; 26.04.2017