2

我正在使用 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;
}

该行具有“父”类，三张卡片中的每一张都包含在 col-md-4 类中。

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

4

3 回答 3

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;
}
于 2018-01-26T00:44:50.810 回答
1

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

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

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

于 2018-01-26T02:29:39.503 回答
1

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

<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

于 2018-01-29T21:27:46.093 回答