Bootstrap Image Sizing In Column - html

Question

I am currently having an issue with Bootstrap that involves html content in one column and an image in another.
For example, I have this 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 & 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>
As you can see I have an image in the col-lg-7, the issue I am now having is that when the page is scaled down horizontally I get a large area of white space because the content container get's narrow.
Here is an example: http://puu.sh/kJRsm/86562deefe.jpg
How do you combat this issue because on large screens the layout looks absolutely fine, it's just when the container starts to get narrow that the white space area get's larger?
I think I could combat the issue by making the col-7 div 100% height of the row and maybes take out the img tag and just add a css background with a cover size property on it however I'm wondering if there are any other ways?

Answer 1

I think the best way to do this is using flexbox https://philipwalton.github.io/solved-by-flexbox/demos/grids/ and check that Vertically Centered Grid Cells section.
Other way is, if you don't have to display all that text on sm or md size you can set hidden-sm or hidden-md on part of text and maybe create some read more link or something. For more info check out this http://getbootstrap.com/css/#responsive-utilities.
And maybe the third way is as you said to create div and inside put that picture and maybe use
.div {
overflow: hidden;
}
.div img {
height: 100%;
width: auto;
}
//OR
.div {
background-size: cover;
background-position: center;
}
Maybe there is some better way to do this and i would also like to learn about it but those are the options that i know and i had similar problem many times.

Answer 2

There are two ways to remove the white space.
One is to remove the divs we used to separate the text and image and float the image to right or left & give it a "width" and "max-width:100%" so on the large screens, It takes the image's width and the image will cover an area and the rest of space will be used by text. Don't remember to use the inside the to work like this.
Here is the example : http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float
the Second option is to test in all the screen sizes (lg-md-sm-xs) Forget sm&xs if you set the image to be 12 columns. You will have to reduce the image width to arrange the text with it on col-md.Regardsnabeel