使用Bootstrap显示响应式图像

Question

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

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

哪种方法可以解决这个问题？

Answer 1

宽高比看起来正确。 你有限制图像高度的东西吗？

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

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

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

Answer 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/