带有动态高度标题图像的 bootstrap 4 固定高度卡

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：

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

Answer 2

您可以在 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>