bootstrap 4 карта фиксированной высоты с динамикой c высота изображения заголовка

Question

Каждая карта состоит из:

1. Изображение (card-img-top)
2. Заголовок (тело карты)
3. Дата (нижний колонтитул)

Заголовок может быть от 1 до 4 строк. Я бы хотел, чтобы это влияло на высоту изображения (заголовок из 4 строк будет иметь высоту изображения меньше, чем заголовок из 1 строки)

Дата всегда будет фиксироваться внизу карты.

<div class="news-story card">
                  <div class="news-story-img">  
                    <img class="card-img-top" src="https://picsum.photos/150/450" alt="#">
                </div>
                    <div class="card-body">
                        <h5 class="news-stories-title d-flex align-items-baseline">1-line News Story</h5> 
                    </div>
                    <div class="card-footer">
                       <p class="news-stories-pub-date"><span>Published: </span>Nov 11, 2019</p>
                    </div>
                </div>

Answer 1

Вы можете достичь того, что ищете, с небольшой помощью flexbox. Вместо использования верхней части изображения, добавьте div с изображением в качестве фона для покрытия. Смотрите пример ниже.

/****====  NEWS STORIES  ====****/

#news-stories .card {
  height: 400px /*Set this to whatever you want the fixed height to be */
}

#news-stories .card-title {
  margin: 20px;
}

#news-stories .card-body {
  background-color: #fff;
  margin: 0;
  padding: 0 !important;
}

#news-stories .imagebg {
  background: url("https://picsum.photos/200/300");
  background-repeat: no-repeat;
  background-size: cover;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="container">
  <section id="news-stories">

    <div class="card-deck">
      <div class="card">

        <div class="card-body d-flex flex-column">
          <div class="imagebg flex-fill"></div>
          <h5 class="card-title flex-grow">This is a News Story Headline title showing the maximum height of 4 lines of text</h5>

        </div>
        <div class="card-footer">
          <p><span>Published:</span> Nov 11, 2019</p>
        </div>
      </div>

      <div class="card">
        <div class="card-body d-flex flex-column">
          <div class="imagebg flex-fill"></div>
          <h5 class="card-title">This is three lines of Text that will display in the headline</h5>

        </div>
        <div class="card-footer">
          <p><span>Published:</span> Nov 11, 2019</p>
        </div>
      </div>

      <div class="card">
        <div class="card-body d-flex flex-column">
          <div class="imagebg flex-fill"></div>
          <h5 class="card-title">This is two lines of Text that will display</h5>

        </div>
        <div class="card-footer">
          <p><span>Published:</span> Nov 11, 2019</p>
        </div>
      </div>

      <div class="card">
        <div class="card-body d-flex flex-column">
          <div class="imagebg flex-fill"></div>
          <h5 class="card-title">This is one line</h5>

        </div>
        <div class="card-footer">
          <p><span>Published:</span> Nov 11, 2019</p>
        </div>
      </div>


    </div>
  </section>
</div>

Answer 2

Для этого вы можете использовать flexbox:

.news-story {
  display: inline-flex;
  vertical-align: top;
  flex-direction: column;
  height: 300px;
  width: 300px;
  border: 1px solid black;
}
.news-story-img {
  flex-grow: 1; /*Fill remaining space*/
  min-height: 100px;
}
img {height: 100%; width: 100%;}
.card-body {
  flex-shrink: 1; /* Shrink more that the other*/
}

<div class="news-story card">
  <div class="news-story-img">  
    <img class="card-img-top" src="https://picsum.photos/150/450" alt="#">
  </div>
  <div class="card-body">
    <h5 class="news-stories-title d-flex align-items-baseline">1-line News Story</h5> 
  </div>
  <div class="card-footer">
    <p class="news-stories-pub-date"><span>Published: </span>Nov 11, 2019</p>
  </div>
</div>
<div class="news-story card">
  <div class="news-story-img">  
    <img class="card-img-top" src="https://picsum.photos/150/450" alt="#">
  </div>
  <div class="card-body">
    <h5 class="news-stories-title d-flex align-items-baseline">2-line News Story<br>2-line News Story</h5> 
  </div>
  <div class="card-footer">
    <p class="news-stories-pub-date"><span>Published: </span>Nov 11, 2019</p>
  </div>
</div>
<div class="news-story card">
  <div class="news-story-img">  
    <img class="card-img-top" src="https://picsum.photos/150/450" alt="#">
  </div>
  <div class="card-body">
    <h5 class="news-stories-title d-flex align-items-baseline">3-line News Story<br>3-line News Story<br>3-line News Story</h5> 
  </div>
  <div class="card-footer">
    <p class="news-stories-pub-date"><span>Published: </span>Nov 11, 2019</p>
  </div>
</div>
<div class="news-story card">
  <div class="news-story-img">  
    <img class="card-img-top" src="https://picsum.photos/150/450" alt="#">
  </div>
  <div class="card-body">
    <h5 class="news-stories-title d-flex align-items-baseline">4-line News Story<br>4-line News Story<br>4-line News Story<br>4-line News Story</h5> 
  </div>
  <div class="card-footer">
    <p class="news-stories-pub-date"><span>Published: </span>Nov 11, 2019</p>
  </div>
</div>