html - Bootstrap v2 缩略图统一高度

Question

我在 Bootstrap 2 网站上遇到问题，我正在向其介绍一个新页面(示例页面:http://www.hamilton-classics.com/photos_test_album.php?album=6339023235662901233)

缩略图(来自 Google 相册)都是统一大小的，但奇怪的一两个是纵向而不是横向。这会搞砸网格的布局。

我试图将图像限制为相同大小(我知道这会拉伸(stretch)图像)并且我尝试使用 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="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

您在内联样式中缺少“px”。应该是 style="max-width: 288px; max-height: 162px"。然后将这些 LI 设置为溢出:隐藏。