Масштабировать изображение, чтобы оно соответствовало карточке, а не перекрывало заголовок

Question

У меня есть несколько карточек с изображением и заголовком под ними, размер изображения и заголовка изменяется по мере изменения размера карточки, а размер карточки изменяется по мере изменения размера экрана. На небольших экранах или с более длинными заголовками возникает проблема, когда изображение покрывает текст.

Я бы хотел, чтобы изображение масштабировалось по размеру карты, но остановитесь, когда оно достигнет ширины карты ИЛИ верхней части текста. (все изображения являются идеальными квадратами, поэтому ширина и высота img всегда должны быть равны)

Вот несколько скриншотов результатов. С левой стороны две вещи, которые я не хочу делать, а с правой стороны - все в порядке.

ссылка на примеры изображений карточек

Поскольку полный код немного длинный, вот JSFiddle с рабочим примером того, как он выглядит сейчас (карты находятся в виде строк / столбцов в стиле начальной загрузки). http://jsfiddle.net/js47withfeeling/dtbx78ay/4/

Ниже приведены некоторые соответствующие фрагменты кода.

HTML карты

    <div class="card-column card">
        <img class="card-img" src="Link to Image">
        <p class="card-title">With Security</p>
    </div>

Куча таких карточек находится внутри этого HTML-блока, в котором применяется некоторая начальная загрузка

<div class="row">
    <div id="loadCardsHere" class="col-md-9 12u(mobile)">
        <!--cards go here -->
    </div>
</div>

соответствующий CSS

body{
    font-family: 'Old Standard TT', serif;
}
.card{
    margin-top:5px;
    margin-right:5px;
}
.card-img{
    width:100%;
    max-height:500;
}

.card-title{
    position:absolute;
    bottom:0;
    align-self: center;
    font-size:180%;
}
.card-column{
    float: left;
    width: 32%;
    height:300;
    cursor: pointer;
    border-color: #01ABAA;
    border-width: medium;
}
@media screen and (max-width: 600px) {
    .card-column {
      width: 100%;
    }
  }
@media (min-width: 768px) {
    .card{
        max-width:33%;
        max-height:auto;
    }
}

Существует ли какой-нибудь атрибут CSS, например, "max-height: (parent.height) - (parent.2ndChild.height)"? (Этот синтаксис явно неправильный, но что-то на этот счет)

Answer 1

Попшувит правильно. Кроме того, align-self является свойством flex, но для этого контекста не существует flex-parent. Вы должны выбрать гибкий маршрут, хотя. Я не проверял, но результат, который вы хотите, вероятно, будет выглядеть так:

.card {
  position: relative;
  display: flex;
  flex-flow: column;
  text-align: center;
  align-items: center;
  width: 100%;
}
.card-img {
  width: 100%;
  object-fit: contain;
}
.card-title {
  ...text styles
}

Кроме того, у вас, кажется, есть отдельные стили для .card и .card-column, когда они фактически являются одним и тем же элементом. Это имеет смысл, только если некоторые из «карточек» не включают класс .card-column. Продолжение гибкого маршрута также позволит вам избавиться от этих надоедливых поплавков!

Answer 2

Удалить position:absolute; bottom:0; из .card-title. Абсолют удаляет его из потока, и у него нет контекста относительно высоты других элементов / элементов.