引導V2縮略圖高度統一

我有一個自舉2個網站，我引入一個新的頁面（示例頁面：http://www.hamilton-classics.com/photos_test_album.php?album=63390232356629）問題引導V2縮略圖高度統一

縮略圖（其中來自谷歌圖片）都是一樣的大小，但是奇怪的一兩個是肖像而不是風景。這然後擰緊了網格的佈局。

我試圖將圖像限制爲相同的大小（我知道這會拉伸圖像），我試圖用CSS剪裁圖像以及將它剪裁到與其他圖像相同的高度，但似乎沒有上班。

我只需要鋪好網格 - 任何幫助表示讚賞！ :)

馬克

這裏是我的代碼，我被串起夾到適合圖像的最新例證...

<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>

來源

2016-10-09 tip2tail

請問您可以粘貼您的HTML和CSS代碼嗎？ – ZombieChowder

@ZombieChowder完成:) – tip2tail

你缺少的內聯風格的'px'。應該是style =「max-width：288px; max-height：162px」。然後將這些LI設置爲溢出：隱藏。

來源

2016-10-09 19:16:19

非常感謝你 - 第二套眼睛總是有幫助！ :) – tip2tail

引導V2縮略圖高度統一

回答

相關問題