列中的 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 標簽，然后添加一個帶有封面大小屬性的 css 背景，但是我想知道是否還有其他方法？

Answer 1

我認為最好的方法是使用 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;
}

也許有一些更好的方法可以做到這一點，我也想了解它，但這些是我知道的選項，我多次遇到類似的問題。

Answer 2

有兩種方法可以去除空白。 一種是刪除我們用來分隔文本和圖像的 div 並將圖像向右或向左浮動 & 給它一個“寬度”和“最大寬度：100%”等在大屏幕上，它需要圖像的寬度和圖像將覆蓋一個區域，其余的空間將被文本使用。 不記得用里面的

像這樣工作。

這是示例： http : //www.w3schools.com/css/tryit.asp?filename=trycss_layout_float

第二個選項是測試所有屏幕尺寸 (lg-md-sm-xs) 如果您將圖像設置為 12 列，請忽略 sm&xs。 您將不得不減小圖像寬度以在 col-md 上排列文本。

問候
納比爾