Bootstrap layout advice - html

Question

I have found myself fumbling around with this odd layout that I need to design using Bootstrap.
Imagine the size of this is 660 x 330 wide, What I want to do is without any padding between anything is have an image on the left side that fills the black color 100%. The size of this will never change, on screens that it doesn't fit it will be using a different layout (so this will only really be on small+ screen sizes.
Here is what I originally was thinking, but since the image doesn't necessarily fit a column width, this will not work. Would it be best to create a container that is exactly 660x330 and then use rows/columns inside that? Or maybe I should step away from bootstrap in this case. Thanks in advance for any advice.
<div class="row">
<div class="col-xs-6">
<img src="../images/temp-featurelarge.jpg"/>
</div>
<div class="col-xs-6">
<div class="row">
</div>
<div class="row">
<div class="col-xs-6">
</div>
<div class="col-xs-6">
</div>
</div>
</div>

Answer 1

Yes, you can create a div with specific Width and Height and then use columns to split. But here in your case I guess if you use "width: 50%" for the inner divs that would be fine and it's not necessary to use Bootstrap columns.

Answer 2

View my demo on jsfiddle
<div class="row">
<div class="col-xs-6">
<div class="left">
asdfdasf
</div>
</div>
<div class="col-xs-6 no_padding">
<div class="row">
<div class="col-xs-12 no_padding">
<div class="right_top">
asfjldfj
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 no_padding">
<div class="bottom_left">Dfdsaf</div>
</div>
<div class="col-xs-6 no_padding">
<div class="bottom_right">Dfdsaf</div>
</div>
</div>
</div>
Css=============>
body{
color:#FFF;
}
.left{
background:black;
height:300px;
}
.right_top{
background:red;
height:150px;
}
.bottom_left{
background:pink;
height:150px;
}
.no_padding{
padding:0;
}
.bottom_right{
background:blue;
height:150px;
}