Bootstrap v2缩略图的高度一致

Question

I have a problem on a Bootstrap 2 site I am introducing a new page to (Example page: http://www.hamilton-classics.com/photos_test_album.php?album=6339023235662901233 )

The thumbnails (which come from Google Photos) are all uniform size, however the odd one or two is portrait rather than landscape. This then screws up the layout of the grid.

I have tried to constrain the images to the same size (I know this will stretch the images) and I have tried to clip the image with CSS as well to crop it to the same height as the other images but nothing seems to work.

I just need to lay the grid out properly - any help appreciated! :)

Mark

---

Here is the latest example of my code where I was strung to clip the image to fit...

<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="6339023235662901233" 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="6339023235662901233" 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="6339023235662901233" 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="6339023235662901233" 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="6339023235662901233" 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="6339023235662901233" 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="6339023235662901233" 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

You are missing the 'px' on the inline style. Should be style="max-width: 288px; max-height: 162px". Then set those LIs to overflow:hidden.