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

Posted 2023-03-06

【中文标题】需要内容增长到相同的高度

【英文标题】：Need content to grow to same height

【发布时间】：2018-07-05 08:32:53

【问题描述】：

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

我的卡片代码如下所示：

  <md-card>
    <div class="md-card-image-and-title">
      <img src="first_day.png"  class="md-card-image" >
      <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 相关的更改，但似乎没有任何效果。有人可以提供一些关于如何使卡片高度相同但卡片图像和卡片标题保持不变的指导吗？

【问题讨论】：

使用相同尺寸的图片。

【参考方案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;

【讨论】：

谢谢！有没有办法在不声明高度的情况下做到这一点？

另一种简单的方法是使所有图像大小相同。

【参考方案2】：

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

html

<!-- Reference Question : https://***.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;

如果您需要进一步解释，请询问，谢谢！。

【参考方案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