ポートフォリオ商品を高さに合わせるにはどうすればいいですか？

Question

私は高さでこれらのアイテムを揃えたいと思います：

私は何が起こっているのはほとんど手掛かりを持っているので、私はそれは、関連するコードだと思うものをペーストするつもりです：

#portfolio .portfolio-item { 
 
     margin: 0 0 15px; 
 
     right: 0; 
 
    } 
 
    #portfolio .portfolio-item .portfolio-link { 
 
     display: block; 
 
     position: relative; 
 
     max-width: 400px; 
 
     margin: 0 auto; 
 
    } 
 
    #portfolio .portfolio-item .portfolio-caption { 
 
     max-width: 400px; 
 
     margin: 0 auto; 
 
     background-color: white; 
 
     text-align: center; 
 
     padding: 25px; 
 
    } 
 
    #portfolio .portfolio-item .portfolio-caption h4 { 
 
     text-transform: none; 
 
     margin: 0; 
 
    } 
 
    #portfolio .portfolio-item .portfolio-caption p { 
 
     font-family: "Droid Serif", "Helvetica Neue", sans-serif; 
 
     font-style: italic; 
 
     font-size: 16px; 
 
     margin: 0; 
 
    }

<section id="portfolio" class="bg-light-gray"> 
 
     <div class="container"> 
 
      <div class="row"> 
 
       <div class="col-lg-12 text-center"> 
 
        <h2 class="section-heading">Portfolio</h2> 
 
        <h3 class="section-subheading text-muted">Here I show some of my work.</h3> 
 
       </div> 
 
      </div> 
 
      <div class="row"> 
 
       <div class="col-md-4 col-sm-6 portfolio-item"> 
 
        <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal"> 
 
         <div class="portfolio-hover"> 
 
          <div class="portfolio-hover-content"> 
 
           <i class="fa fa-plus fa-3x"></i> 
 
           <p>click for more</p> 
 
          </div> 
 
         </div> 
 
         <img src="img/portfolio/img.jpg" class="img-responsive" alt=""> 
 
        </a> 
 
        <div class="portfolio-caption"> 
 
         <h4>1st job</h4> 
 
         <p class="text-muted">Design</p> 
 
        </div> 
 
       </div> 
 
       <div class="col-md-4 col-sm-6 portfolio-item"> 
 
        <a href="#portfolioModal2" class="portfolio-link" data-toggle="modal"> 
 
         <div class="portfolio-hover"> 
 
          <div class="portfolio-hover-content"> 
 
           <i class="fa fa-plus fa-3x"></i> 
 
           <p>click for more</p> 
 
          </div> 
 
         </div> 
 
         <img src="img/portfolio/img2.jpg" class="img-responsive" alt=""> 
 
        </a> 
 
        <div class="portfolio-caption"> 
 
         <h4>2nd job</h4> 
 
         <p class="text-muted">Design</p> 
 
         <br> 
 
        </div> 
 
       </div> 
 
       <div class="col-md-4 col-sm-6 portfolio-item"> 
 
        <a href="#portfolioModal3" class="portfolio-link" data-toggle="modal"> 
 
         <div class="portfolio-hover"> 
 
          <div class="portfolio-hover-content"> 
 
           <i class="fa fa-plus fa-3x"></i> 
 
           <p>click for more</p> 
 
          </div> 
 
         </div> 
 
         <img src="img/portfolio/img3.png" class="img-responsive" alt=""> 
 
        </a> 
 
        <div class="portfolio-caption"> 
 
         <h4>3rd job</h4> 
 
         <p class="text-muted">Design</p> 
 
        </div> 
 
       </div> 
 
       <div class="col-md-4 col-sm-6 portfolio-item"> 
 
        <a href="#portfolioModal4" class="portfolio-link" data-toggle="modal"> 
 
         <div class="portfolio-hover"> 
 
          <div class="portfolio-hover-content"> 
 
           <i class="fa fa-plus fa-3x"></i> 
 
           <p>click for more</p> 
 
          </div> 
 
         </div> 
 
         <img src="img/portfolio/img4.jpg" class="img-responsive" alt=""> 
 
        </a> 
 
        <div class="portfolio-caption"> 
 
         <h4>Beach Tennis Brand</h4> 
 
         <p class="text-muted">Design</p> 
 
        </div> 
 
       </div> 
 
       <div class="col-md-4 col-sm-6 portfolio-item"> 
 
        <a href="#portfolioModal5" class="portfolio-link" data-toggle="modal"> 
 
         <div class="portfolio-hover"> 
 
          <div class="portfolio-hover-content"> 
 
           <i class="fa fa-plus fa-3x"></i> 
 
           <p>click to watch</p> 
 
          </div> 
 
         </div> 
 
         <img src="img/portfolio/img5.jpg" class="img-responsive" alt=""> 
 
        </a> 
 
        <div class="portfolio-caption"> 
 
         <h4>NGO "4th job"</h4> 
 
         <p class="text-muted">Design</p> 
 
        </div> 
 
       </div> 
 
       <div class="col-md-4 col-sm-6 portfolio-item"> 
 
        <a href="#portfolioModal6" class="portfolio-link" data-toggle="modal"> 
 
         <div class="portfolio-hover"> 
 
          <div class="portfolio-hover-content"> 
 
           <i class="fa fa-plus fa-3x"></i> 
 
           <p>click for more</p> 
 
          </div> 
 
         </div> 
 
         <img src="img/portfolio/img6.jpg" class="img-responsive" alt=""> 
 
        </a> 
 
        <div class="portfolio-caption"> 
 
         <h4>Design</h4> 
 
         <p class="text-muted">5th job</p> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </section>

すべてのヘルプ感謝！

Answer 1

あり、これを行うための良い方法は多分ですが、私は何をすることができrecommandますが、このようなdivの内側にimg要素をラップすることです：

<div class="img-wrap"><img src="source.png" class="img-full"></div> 

その後、あなたはIMG-ラップ100％の幅を与え、固定の高さは、あなたが200pxののIMG最大の高さを与える

.img-wrap{ 
width:100%; 
height:200px; 
overflow:hidden; 
background:#cccccc; 
} 

最終隠さオーバーフローと200pxのを言うことができます。

.img-full{ 
max-width:100%; 
max-height:200px; 
} 

作業を行う必要があります。あなたのイメージはそれの比率を保つこのように。

Answer 2

1つの以上の容器を追加してみてください、あなたは石工のレイアウトを使用することができます（Googleの中の同位体JSを検索）またはあなたが石材を使用したくない場合は、画像ごとに.portfolio-item

のために（たとえば）min-height:300px;max-height:300px;を設定することができますfor img：

.image_container{ 
    width:100%; 
    height:300px; 
    overflow:hidden; 
} 

.image_container img{ 
    max-width:100%; 
    height:auto; 
} 

あなたの画像は切り取られます。