html - 如何使用语义 UI 垂直对齐不同大小的图像

Question

你好 Stack Overflowers，我不知道如何垂直对齐不同尺寸的图像并将它们排成一行？所有这些都应该在一行中，第 3 列应该与第 1 列或第 2 列具有相同的高度。

Example picture

Codepen

body {
  width: 80%;
  margin: 0 auto;
}

p {
  text-align: justify;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css" rel="stylesheet"/>
<div class="ui stackable three column grid">

  <div class="column">
    <div class="ui center aligned segment">
      <div class="ui small image">
        <img src="http://placehold.it/200" alt="" />
      </div><!-- image -->
      <h2 class="ui center aligned header"><i class="code icon"></i></h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vulputate lacus vitae malesuada porttitor. Vivamus commodo eleifend faucibus. Vestibulum a quam aliquam, euismod tellus eget, malesuada tellus.
        </p>
    </div><!-- segment -->
  </div><!-- column 1 -->

  <div class="column">
    <div class="ui center aligned segment">
      <div class="ui small image">
        <img src="http://placehold.it/200" alt="" />
      </div><!-- image -->
      <h2 class="ui center aligned header"><i class="cloud icon"></i></h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vulputate lacus vitae malesuada porttitor. Vivamus commodo eleifend faucibus. Vestibulum a quam aliquam, euismod tellus eget, malesuada tellus.
        </p>
    </div><!-- segment -->
  </div><!-- column 2 -->
  
  <div class="column">
    <div class="ui center aligned segment">
      <div class="ui small image">
        <img src="http://placehold.it/200x100" alt="" />
      </div><!-- image -->
      <h2 class="ui center aligned header"><i class="hashtag icon"></i></h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vulputate lacus vitae malesuada porttitor. Vivamus commodo eleifend faucibus. Vestibulum a quam aliquam, euismod tellus eget, malesuada tellus.
        </p>
    </div><!-- segment -->
  </div><!-- column 3 -->
</div>

Answer 1

试试这个。 JS fiddle :https://jsfiddle.net/batrasoe/e8yb99ha/

我们将图像的父 div 设置为集合中最高的图像。这将使列的高度相等。

.ui.small.image {

  height: 200px; /*Max Possible Height of the image */
}

接下来，为了使图像居中，我们使用以下 CSS:

  .ui.small.image > img {

        position: absolute;  
        max-height: 100%;  
        max-width: 100%; 
        width: auto;
        height: auto;    
        top: 0;  /*Centering the image*/
        bottom: 0;    /*Centering the image*/
        left: 0;   /*Centering the image*/
        right: 0;   /*Centering the image*/
        margin: auto;
    }