图像“推”他人答案

【问题标题】：Images "pushing" others away图像“推”他人
【发布时间】：2013-10-28 11:27:28
【问题描述】：

基本上我想在我的 Bootstrap 页面上列出我的图像，并为每个图像提供列跨度。

现在看起来如下：

但是，如果其中一个图像比其他图像稍大，它会将它们推开，破坏视图，如下所示（哈利波特的第一张图像太大）：

我怎样才能让它无论图像原始大小如何，引导程序总是以相同大小显示每个图像，而不是像上面那样推开其他图像？

这是显示图像的 HTML：

<div class="row">
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/Harry Potter and the Deathly Hallows: Part 2_2011"><img src="/Images/Movies/Harry Potter and the Deathly Hallows Part 2_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/Transformers: Dark of the Moon_2011"><img src="/Images/Movies/Transformers Dark of the Moon_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/The Twilight Saga: Breaking Dawn - Part 1_2011"><img src="/Images/Movies/The Twilight Saga Breaking Dawn - Part 1_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/The Hangover Part II_2011"><img src="/Images/Movies/The Hangover Part II_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/Pirates of the Caribbean: On Stranger Tides_2011"><img src="/Images/Movies/Pirates of the Caribbean On Stranger Tides_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/Fast Five_2011"><img src="/Images/Movies/Fast Five_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/Mission: Impossible - Ghost Protocol_2011"><img src="/Images/Movies/Mission Impossible - Ghost Protocol_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/Cars 2_2011"><img src="/Images/Movies/Cars 2_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/Sherlock Holmes: A Game of Shadows_2011"><img src="/Images/Movies/Sherlock Holmes A Game of Shadows_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/Thor_2011"><img src="/Images/Movies/Thor_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/Rise of the Planet of the Apes_2011"><img src="/Images/Movies/Rise of the Planet of the Apes_2011.jpg" /></a>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2">
            <a class="thumbnail" href="/movies/watch/Captain America: The First Avenger_2011"><img src="/Images/Movies/Captain America The First Avenger_2011.jpg" /></a>
        </div>
</div>

【问题讨论】：

标签： html css image twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

在您的 img 元素上改用 display: inline-block。

使用inline-block，行中的所有图片都将被视为一行中的单词，不会遭受与浮动相同的命运。

【讨论】：

是的，如果你不在乎它们的高度是否不同，那也可以。
我只是添加了它，但它并没有改变任何东西。
我认为它被 'float: left' 覆盖了。还要在上面加上float: none。
我刚刚添加了它，但它仍然没有改变任何东西。
看到这个小提琴：jsfiddle.net/RedDevil/HzMQp 也许属性被覆盖了。在 Chrome 中打开检查器并检查 css 属性。

【解决方案2】：

只需为图像创建一个类并明确设置高度，例如

.thumbnail img {
       height: 100px;
}

【讨论】：

我明白了——但是我想让他们保持他们获得的宽度的纵横比，而不是一些固定的大小。但是，如果没有其他解决方案，那么我想就可以了。
如果你只设置高度，它们将保持它们的纵横比。如果你设置宽度，那么它们会被压扁一点。另一种选择是设置 `height: 100px;溢出：隐藏；”在 a.thumbnail 上，但这会切断图像。