需要内容增长到相同的高度

Question

我正在使用 AngularJS Material 并且运行遇到了一个问题，试图让 md-cards 达到相同的高度。在屏幕上，卡片的高度相同，但我真的只希望内容部分增长以填充空闲 space。下面你可以看到我的卡片高度相同，但我希望我的图片和图片标题保持不变，而下面的所有内容都会增长以适应最大高度：

我的卡片代码如下所示：

  <md-card>
    <div class="md-card-image-and-title">
      <img src="first_day.png"  class="md-card-image" alt="{{c.title}}">
      <span class="md-title">{{c.title}}</span>
    </div>

    <md-card-actions layout="row" layout-align="start center">
      <md-button>Action 1</md-button>
      <md-button>Action 2</md-button>
    </md-card-actions>
    <md-card-content>
      <p>STUFF</p>
      <p>STUFF</p>
      <md-divider style="padding-bottom:10px;"></md-divider>
      <p>STUFF</p>    
    </md-card-content>
  </md-card>

我的 CSS 行和其中的卡片如下所示：

.parent {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.parent .col-md-4, .parent .col-md-4 div, .parent .col-md-4 div > md-card {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
    //need these three lines in order to work in IE
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}

该行有 class "parent" 并且三张牌中的每一张都包含在 col-md-4 class.

中

我尝试了一系列不同的 CSS 相关更改，但似乎没有任何效果。有人可以提供一些关于如何使卡片高度相同但卡片图像和卡片标题保持原位的指导吗？

Answer 1

给 .md-card-image-and-title 一个固定的高度添加应用 object-fit:contain 规则到 .md-card-image.

.md-card-image-and-title{
  height:150px;/* fixed height */
}
.md-card-image{
  height:100%;
  width:100%;
  object-fit:contain;
}

Answer 2

我已经为您创建了一个代码笔 codepen example，希望对您有所帮助！。以下是代码示例：

HTML

<!-- Reference Question :  -->

<section>
  <article>
    <figure>
      <img>
      <figcaption></figcaption>
    </figure>
    <div>
      <header>
        <h2>Ibrahim Aziz</h2>
        <span>Administrator</span>
      </header>
      <p>I'm a technical lead at infoconnect</p>
    </div>
  </article>

  <article>
    <figure>
      <img>
      <figcaption></figcaption>
    </figure>
    <div>
      <header>
        <h2>Ibrahim Aziz</h2>
        <span>Administrator</span>
      </header>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
  </article>

  <article>
    <figure>
      <img>
      <figcaption></figcaption>
    </figure>
    <div>
      <header>
        <h2>Ibrahim Aziz</h2>
        <span>Administrator</span>
      </header>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </div>
  </article>
</section>

CSS

section
{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

section article
{
  margin: 20px;
  width: 240px;
  height: auto;
  flex-grow: 1;
  background-color: red;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-direction: column;
}

section article figure
{
  margin: 0px;
  height: 120px;
  width: 100%;
  flex-grow: 0;
  background-color: blue;
}

section article div
{
  align-self: flex-start;
  flex-grow: 1;
}

请问是否需要进一步解释，谢谢！

Answer 3

我知道这里有一个公认的答案，但我想提出一个可能更简单的修复方法。

<md-card layout="column">
  <img flex="50" ng-src="{{img}}"></img>
  <md-card-actions>
    //Buttons here
  </md-card-actions>
  <md-card-content flex>
    //expanding content here
  </md-card-content>
</md-card>

在这种情况下，我使用 flex 告诉 img 标签占用卡片高度的一定百分比 flex="50"，让卡片操作占据它们自己的 auto 高度，并告诉卡片的内容用 flex

填充剩下的任何内容

需要内容增长到相同的高度

Need content to grow to same height

css

flexbox

angularjs

angularjs-material

md-card