在列中调整Bootstrap图像大小

Question

我目前在使用Bootstrap时遇到了一个问题，涉及到一列中的HTML内容和另一列中的图像。

例如，我有以下HTML代码：

<div class="container-fluid main">
    <div class="row">
        <div class="col-xs-12 col-md-12 col-sm-12 col-lg-5 new-offers-text">
            <h2>The new Tivoli now with half price specification upgrades</h2>
            <ul>
                <li>Half price upgrade from an SE to an EX model - saving <strong>£825</strong></li>
                <li>Half price upgrade from an EX to an ELX – saving <strong>£700</strong></li>
                
            </ul>
            <p>Offer available until 31st October 2015 and on <strong>petrol engines</strong> only.</p>
            <div class="clear spacer"></div>
            <h3>Tivoli PCP</h3>
            <p>SsangYong Tivoli is now available through a PCP giving you peace of mind.</p>

            <p><strong>And for a limited time only, Tivoli EX petrol manuals purchased through PCP are eligible for 3 years free servicing</strong></p>
            <p>With low monthly payments and SsangYong providing a Guaranteed Future Value for your vehicle you have three options on completion of your contract:</p>
            <ul>
                <li>Option 1 - Pay final payment &amp; keep the car</li>
                <li>Option 2 - Return the car</li>
                <li>Option 3 - Trade in against a new SsangYong</li>
            </ul>
            <p>Talk to us about tailoring a personal quotation to meet your needs.</p>
        </div>
        <div class="col-xs-12 col-md-12 col-sm-12 col-lg-7">
            <img src="/media/wysiwyg/porto/cmspages/ssangyong/tivoli/towing.jpg" class="manufacturer-logo">
        </div>
    </div>
</div>

如您所见，我在col-lg-7中有一张图片，现在的问题是当页面水平缩小时，由于内容容器变窄，会出现大面积的白色空间。这里有一个例子：http://puu.sh/kJRsm/86562deefe.jpg。您如何解决这个问题？因为在大屏幕上，布局看起来非常好，只有当容器开始变窄时，白色空间区域才会变得更大。我认为我可以通过使col-7 div成为行的100%高度，可能删除img标记，只需添加带有cover大小属性的css背景来解决这个问题，但我想知道是否还有其他方法？

- Christopher

---

你能分享一个演示吗，这样我们就可以扩展并查看问题了吗？ - Shahil M

好的，这是开发网站：http://dev.drivencarsales.co.uk/ssangyong-tivoli，请滚动到页面底部，您将看到该部分。 - Christopher

Answer 1

有两种方法可以去除空白。 一种是删除我们用来分隔文本和图像的div，并将图像浮动到右侧或左侧，并给它一个“width”和“max-width:100%”，这样在大屏幕上，它会占据图像的宽度，图像将覆盖一个区域，其余的空间将被文本使用。不要忘记在

内使用
使其起作用。

这是一个例子：http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float

第二个选项是在所有屏幕尺寸（lg-md-sm-xs）中进行测试。如果您将图像设置为12列，则忘记sm&xs。您将不得不减小图像宽度以在col-md上排列文本。

敬礼
nabeel

- nabeel

Answer 2

我认为最好的方法是使用flexbox https://philipwalton.github.io/solved-by-flexbox/demos/grids/ 并检查 Vertically Centered Grid Cells 部分。

另一种方法是，如果您不必在sm或md大小上显示所有文本，则可以在部分文本上设置hidden-sm或hidden-md，并可能创建一些“阅读更多”链接或其他内容。有关更多信息，请查看http://getbootstrap.com/css/#responsive-utilities。

也许第三种方法就像你所说的那样，创建一个div，在里面放置图片，然后可能使用

.div {
  overflow: hidden;
}

.div img {
  height: 100%;
  width: auto;
}

//OR

.div {
  background-size: cover;
  background-position: center;
}

也许有更好的方法来解决这个问题，我也很想学习它，但这些是我所知道的选项，而且我曾经遇到过类似的问题。

- Nenad Vracar