Question

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

我的卡片代码如下所示：

  <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;
}

该行有类＆＃34; parent＆＃34;并且三张牌中的每一张都包含在col-md-4类中。

我尝试了一系列不同的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 codepen example，希望它有所帮助！以下是代码示例：

HTML

<!-- Reference Question : https://stackoverflow.com/questions/48453954/need-content-to-grow-to-same-height -->

<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

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

＆＃13;

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

＆＃13;

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

所留下的内容

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

3 个答案: