引导程序中的图像放置答案

【问题标题】：Image placement in bootstrap引导程序中的图像放置
【发布时间】：2016-03-07 09:29:47
【问题描述】：

我是网络开发新手，请多多包涵。我必须用一组这样的图像创建一个块：

我尝试使用表格来执行此操作，但最后一列的图像比例不正确。我相信因为行的高度。我设法通过使用rowspan 正确获取了中心图像。我在网上查了很多教程，但找不到中间图像是这样的。我也尝试过使用li。但是失败了。这是我拥有的表格的代码

<table class="home" align="center">

        <tr>
            <td><img src="http://localhost/sty_partners/img/main_top_left.jpg" alt="" class="img-responsive center-block" >

            </td>
            <td rowspan ="2"><img src="http://localhost/sty_partners/img/main_center.jpg" alt="" class="img-responsive center-block">
            <!--<div class="center" > <p> SPEND MORE <br> time doing what <br> you love</p> </div>-->
            </td>
            <td><img src="http://localhost/sty_partners/img/main_top_right.jpg" alt="" class="img-responsive center-block"></td>
        </tr>
        <tr>
            <td><img src="http://localhost/sty_partners/img/main_bottom_left.jpg" alt="" class="img-responsive center-block"></td>

            <td><img src="http://localhost/sty_partners/img/main_bottom_right.jpg" alt="" class="img-responsive center-block"></td>

        </tr>
    </table>

这是表格的 CSS：

table.home img{
width:100%; height:100%;}

谁能告诉我该怎么做？

【问题讨论】：

标签： php html css image twitter-bootstrap

【解决方案1】：

您应该为此使用引导网格系统。 http://getbootstrap.com/css/#grid

您可能需要添加一些自定义 css 类以按照您想要的方式调整填充并使所有列的高度相同。网上有很多关于这个的教程（做一个快速的谷歌搜索）。

【讨论】：

我也试过列。问题是，这样我就不能使中心图像与它两侧的图像高度相同
这太棒了！谢谢迈克

【解决方案2】：

您应该能够仅使用 Bootstrap 列完成大部分操作。如果您不熟悉网格系统或需要澄清，我会去 W3C：http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp。如果仅此一项不起作用，您可能还需要使用自己的 CSS。 W3C 也有关于 CSS 的大量信息：http://www.w3schools.com/css/default.asp。没有更多细节，我不能告诉你更多。也许使用 background-image 属性会起作用？

【讨论】：