セマンティックUIを使用して異なるサイズの画像を垂直に整列する方法

Question

こんにちはスタックオーバーフロー、 異なるサイズの画像を垂直方向に整列させて1行に保持する方法がわかりませんか？ これらのすべてを1行にする必要があり、列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 > 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; 
    } 

：

.ui.small.image { 

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

次に、画像を中央に、我々は以下のCSSを使用します