JSFiddle - React, Tailwind, and code Playground

by allcaps

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<div class="col-xs-6">
    <div id="wrapper">
        <img class="img-responsive" 
             src="http://www.aviatorcameragear.com/wp-content/uploads/2012/07/placeholder_2-1024x640.jpg" />
    </div>
</div>

CSS

.col-xs-6 {
    background-color: red;
    padding-top: 10px; /* Make the width visible. */
}

#wrapper { 
    background-color: blue;
    padding-top: 10px;
    /* One of these makes the image break out of the parent. In FireFox */
    float:left;
    display: inline-block;
    /* Giving a widht to the parents fixes the issue also. */
    /* width: 100%; */
}