使用 Bootstrap 显示响应式图像答案

【问题标题】：Displaying Responsive Images using Bootstrap使用 Bootstrap 显示响应式图像
【发布时间】：2014-03-17 21:20:12
【问题描述】：

我正在使用具有画廊视图的 Bootstrap，在大屏幕上它在平板电脑上显示 3 列和 2 行，然后在手机上显示单列。

我用于大屏幕的图像尺寸相对正确，但是当我们将其移向手机时，图像的宽度比窗口的大小要小。

处理此问题的最佳方法是什么？

【问题讨论】：

标签： twitter-bootstrap responsive-design twitter-bootstrap-3

【解决方案1】：

纵横比看起来不错。你有什么东西限制了图片的高度吗？

尝试强制图像的宽度填充父级，即 class=col-xs-12

您可以查看此参考资料。提问者有一个类似的问题。也许他们的其中一个答案会对您有所帮助。

How to create a responsive image that also scales up in Bootstrap 3

【讨论】：

【解决方案2】：

为确保网格“折叠”后它适合列的整个空间，您可以添加 width: 100%; 以允许图像占据列的整个宽度。

基本示例：

<style type="text/css">
    .imagecolumn img {
        width: 100%;
    }
</style>

<div class="row">
   <div class="col-md-4 imagecolumn">
       <img src="../Landscape.jpg" />
   </div>
   <div class="col-md-4 imagecolumn">
       <img src="../Mountain-Landscape-Wallpaper.jpg" />
   </div>
   <div class="col-md-4 imagecolumn">
       <img src=../Snake-River-Idaho.jpg" />
   </div>
</div>

演示小提琴：http://jsfiddle.net/ebJbZ/

虽然，您的结构似乎在每个内列中都有<div> - 它应该具有类似的网格结构：

<div class="row">
    <!-- Outer Column -->
    <div class="col-md-4">
        <div class="row">
            
            <!-- Inner Full-width Column -->
            <div class="col-md-12 imagecolumn">
                <img src="../Landscape.jpg" />
                Picture One
            </div>

        </div>
    </div>

    <!-- Outer Column -->
    <div class="col-md-4">
        <div class="row">

            <!-- Inner Full-width Column -->
            <div class="col-md-12 imagecolumn">
                <img src="../Mountain-Landscape-Wallpaper.jpg" />
                Picture Two
            </div>

        </div>
    </div>

    <!-- Outer Column -->
    <div class="col-md-4">
        <div class="row">

            <!-- Inner Full-width Column -->
            <div class="col-md-12 imagecolumn">
                <img src=../Snake-River-Idaho.jpg" />
                Picture Three
            </div>

        </div>
    </div>
</div>

这样图像将匹配全宽内列，如：

col-md-12 也等于 100%；

演示小提琴： http://jsfiddle.net/mXmf9/

【讨论】：

我应该将它添加到 div 还是图像本身？
现在这取决于列的网格结构，如果列中的 <div />s 应该是 col-xs-12 以确保它与内列的全宽匹配，我会编辑我的答案。
@HarshaMV 已编辑，但简短地回答了您的问题，带有 full width 的内列 - 无论如何，图像应该与大小匹配。