Question

我正在使用bootstrap缩略图类来创建像这样的列表

它工作正常，使用的图像大小为1360 * 768。

我尝试将图像更改为另一个尺寸为4128x2322的图像，导致如下问题。

这里你可以看到当我使用较大的图像时它没有显示为缩略图，看起来它也破坏了网格结构。希望你注意到hscroll。

所以Bootstrap缩略图不会随着列的放置而调整吗？

这是我的HTML标记

<div class="col-md-offset-1 col-md-6 question-options">

        <div class="row individual ">
            <div class="col-md-4 col-sm-4 col-xs-4 match-left-column-options image-column ">
                <div class="thumbnail">
                    <img alt="Generic placeholder thumbnail" src="http://myurl/images/match_20151118150735474_PJFYFTPZVL.jpg">
                </div>
                <div class="caption">
                    <h4>Left option1</h4>

                </div>
            </div>
            <div class="col-md-2 arrow-column"><i class="fa fa-caret-right fa-5x"></i></div>
            <div class="col-md-2 arrow-column"><i class="fa fa-caret-left fa-5x"></i></div>
            <div class="col-md-4 col-sm-4 col-xs-4 match-right-column-options image-column">
                 <div class="thumbnail">
                    <img alt="Generic placeholder thumbnail" src="http://myurl/images/match_20151118150735474_PJFYFTPZVL.jpg">
                </div>
                <div class="caption">
                    <h4>Right Option1</h4>

                </div>
            </div>

        </div>




    </div>

Answer 1

我在jsFiddle中用'2560×1440'图像和'1920×1080'图像创建你的例子，但看起来还不错。

DEMO

我认为这是关于你的引导版本，或者你需要查看这个缩略图类的其他父母。也许这里有填充或边距！

在这种情况下，当您使用img{width:%100}时，它将适合列。

您应该在“ match-left-column-options ”或“ image-column ”或“匹配中删除宽度或高度右汉字-列选项”。

Answer 2

<div class="col-md-offset-1 col-md-6 question-options">

    <div class="row individual ">
        <div class="col-md-4 col-sm-4 col-xs-4 match-left-column-options image-column ">
            <div class="thumbnail">
                <img alt="Generic placeholder thumbnail" src="Image/1.png" class="img-thumbnail">
            </div>
            <div class="caption">
                <h4>Left option1</h4>

            </div>
        </div>
        <div class="col-md-2 arrow-column"><i class="fa fa-caret-right fa-5x"></i></div>
        <div class="col-md-2 arrow-column"><i class="fa fa-caret-left fa-5x"></i></div>
        <div class="col-md-4 col-sm-4 col-xs-4 match-right-column-options image-column">
             <div class="thumbnail">
                <img alt="Generic placeholder thumbnail" src="Image/1.png" class="img-thumbnail">
            </div>
            <div class="caption">
                <h4>Right Option1</h4>

            </div>
        </div>

    </div>
</div>

我认为代码可以帮到你，检查一下!!!

使用较大图像时，Bootstrap缩略图图像大小会增加

2 个答案: