ブートストラップv2は均一な高さ

Question

は私が（http://www.hamilton-classics.com/photos_test_album.php?album=63390232356629例ページ）に新しいページを紹介していますブートストラップ2サイト上の問題を抱えているサムネイル奇数の1つか2つは風景ではなくポートレートです。これはグリッドのレイアウトをねじ込みます。

私は画像を同じサイズに制限しようとしましたが（画像が伸びることはわかっています）、他の画像と同じ高さに切り抜くように画像を切り抜こうとしましたが、何も見えません働く

私はちょうどグリッドを適切にレイアウトする必要があります。 :)

マーク

が

---

ここ

私は合うように画像をクリップする神経質た私のコードの最新の例です...

<div class="container"> 
<div class="row"> 
    <div class="span12"> 
     <ul class="thumbnails"> 
      <li class="span3" style="max-width: 288; max-height: 162;"> 
       <a data-lightbox="63390232356629" class="thumbnail" href="https://lh3.googleusercontent.com/-bVJtV07mTxs/V_i8DCt6LhI/AAAAAAAAAOA/g5QLlYja0GgNvxc5UMmZnw2kggM_R0_MQCHM/14689_20160827_112612_640x360.jpg"> 
        <img style="clip: rect(0px,288px,162px,0px); /* width: 288; height: 162; */" src="https://lh3.googleusercontent.com/-bVJtV07mTxs/V_i8DCt6LhI/AAAAAAAAAOA/g5QLlYja0GgNvxc5UMmZnw2kggM_R0_MQCHM/s288/14689_20160827_112612_640x360.jpg" alt="14689_20160827_112612_640x360.jpg"> 
       </a> 
      </li> 
      <li class="span3" style="max-width: 288; max-height: 162;"> 
       <a data-lightbox="63390232356629" class="thumbnail" href="https://lh3.googleusercontent.com/-QLIpwQYb13c/V_i8DJmS5CI/AAAAAAAAAOA/9U-0Sz93u8g3mX7RyFc3KsuJtWVQaHKAwCHM/14690_20160827_112638_640x360.jpg"> 
        <img style="clip: rect(0px,288px,162px,0px); /* width: 288; height: 162; */" src="https://lh3.googleusercontent.com/-QLIpwQYb13c/V_i8DJmS5CI/AAAAAAAAAOA/9U-0Sz93u8g3mX7RyFc3KsuJtWVQaHKAwCHM/s288/14690_20160827_112638_640x360.jpg" alt="14690_20160827_112638_640x360.jpg"> 
       </a> 
      </li> 
              <li class="span3" style="max-width: 288; max-height: 162;"> 
       <a data-lightbox="63390232356629" class="thumbnail" href="https://lh3.googleusercontent.com/-y1cmajNJYHM/V_i8DPsUaFI/AAAAAAAAAOA/Ai7BbMW2bEMlE9XpxHQjQvYQg--OZM3ywCHM/14732_20160827_144152_640x360.jpg"> 
        <img style="clip: rect(0px,288px,162px,0px); /* width: 288; height: 162; */" src="https://lh3.googleusercontent.com/-y1cmajNJYHM/V_i8DPsUaFI/AAAAAAAAAOA/Ai7BbMW2bEMlE9XpxHQjQvYQg--OZM3ywCHM/s288/14732_20160827_144152_640x360.jpg" alt="14732_20160827_144152_640x360.jpg"> 
       </a> 
      </li> 
          <li class="span3" style="max-width: 288; max-height: 162;"> 
       <a data-lightbox="63390232356629" class="thumbnail" href="https://lh3.googleusercontent.com/-q42hFSUjfYI/V_i8DF3kroI/AAAAAAAAAOA/tkZGtSRUzH8M2Pnd64rTzbcijL-1G2lIwCHM/14733_20160827_144304_640x360.jpg"> 
        <img style="clip: rect(0px,288px,162px,0px); /* width: 288; height: 162; */" src="https://lh3.googleusercontent.com/-q42hFSUjfYI/V_i8DF3kroI/AAAAAAAAAOA/tkZGtSRUzH8M2Pnd64rTzbcijL-1G2lIwCHM/s288/14733_20160827_144304_640x360.jpg" alt="14733_20160827_144304_640x360.jpg"> 
       </a> 
      </li> 
          <li class="span3" style="max-width: 288; max-height: 162;"> 
       <a data-lightbox="63390232356629" class="thumbnail" href="https://lh3.googleusercontent.com/-EAUrx7XvWAs/V_i8DJSJDnI/AAAAAAAAAOA/d9JV-S5FFMEbEHMzTfzeH9byhxVnZubtQCHM/14734_20160827_144327_640x360.jpg"> 
        <img style="clip: rect(0px,288px,162px,0px); /* width: 288; height: 162; */" src="https://lh3.googleusercontent.com/-EAUrx7XvWAs/V_i8DJSJDnI/AAAAAAAAAOA/d9JV-S5FFMEbEHMzTfzeH9byhxVnZubtQCHM/s288/14734_20160827_144327_640x360.jpg" alt="14734_20160827_144327_640x360.jpg"> 
       </a> 
      </li> 
          <li class="span3" style="max-width: 288; max-height: 162;"> 
       <a data-lightbox="63390232356629" class="thumbnail" href="https://lh3.googleusercontent.com/-k58i_J4oWDE/V_i8DE9IMlI/AAAAAAAAAOA/aX4BgupW2WgtDlAa42xPJCJ0i_YpdpAywCHM/14735_20160827_144344_640x360.jpg"> 
        <img style="clip: rect(0px,288px,162px,0px); /* width: 288; height: 162; */" src="https://lh3.googleusercontent.com/-k58i_J4oWDE/V_i8DE9IMlI/AAAAAAAAAOA/aX4BgupW2WgtDlAa42xPJCJ0i_YpdpAywCHM/s288/14735_20160827_144344_640x360.jpg" alt="14735_20160827_144344_640x360.jpg"> 
       </a> 
      </li> 
          <li class="span3" style="max-width: 288; max-height: 162;"> 
       <a data-lightbox="63390232356629" class="thumbnail" href="https://lh3.googleusercontent.com/-zSHKzXSy5JY/V_i8DPC4KsI/AAAAAAAAAOA/er570F2aNe4A4pg44ilmJ1a_RMLymi4bgCHM/14736_20160827_144435_270x480.jpg"> 
        <img style="clip: rect(0px,162px,162px,0px); /* width: 162; height: 162; */" src="https://lh3.googleusercontent.com/-zSHKzXSy5JY/V_i8DPC4KsI/AAAAAAAAAOA/er570F2aNe4A4pg44ilmJ1a_RMLymi4bgCHM/s288/14736_20160827_144435_270x480.jpg" alt="14736_20160827_144435_270x480.jpg"> 
       </a> 
      </li> 
     </ul> 
    </div> 
</div> 

Answer 1

あなたが不足しています'px'はインラインスタイルです。 style = "max-width：288px; max-height：162px"にする必要があります。これらのLIをオーバーフロー：hiddenに設定します。