Bootstrap v2 миниатюр равномерная высота

У меня есть проблема на Bootstrap 2 сайта я вношу новую страницу (пример страницы: http://www.hamilton-classics.com/photos_test_album.php?album=63390232356629)Bootstrap v2 миниатюр равномерная высота

Эскизы (которые приходят из Google Фото) являются все одинакового размера, однако нечетный один или два - портрет, а не пейзаж. Затем это завинчивает макет сетки.

Я попытался ограничить изображения одинакового размера (я знаю, что это растянет изображения), и я попытался обрезать изображение с помощью 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 done :) – tip2tail

У вас не хватает 'px' в встроенном стиле. Должно быть style = "max-width: 288px; max-height: 162px". Затем установите эти LI для переполнения: скрытые.

источник

2016-10-09 19:16:19

Большое вам спасибо - второй набор глаз всегда помогает! :) – tip2tail

Bootstrap v2 миниатюр равномерная высота

ответ

Смежные вопросы