<div class="container">
<div class="row">
<div class="col-md-4 one">
<div><p> cover </p></div>
</div>
<div class="col-md-4 two">
<div> <p> contain </p> </div>
</div>
<div class="col-md-4 three">
<div> <p> custom </p> </div>
</div>
</div>
</div><!-- /.container -->
body {
padding-top: 60px;
}
.one{
height: 200px;
line-height: 200px;
background-color: red;
background-repeat: no-repeat;
background-position: top left;
background-size: cover;
background-image: url('http://www.lorempixel.com/400/400/');
}
.two{
height: 200px;
line-height: 200px;
background-color: green;
background-repeat: no-repeat;
background-position: top left;
background-size: contain;
background-image: url('http://www.lorempixel.com/400/400/');
}
.three{
height: 200px;
line-height: 200px;
background-color: yellow;
background-repeat: no-repeat;
background-position: top left;
background-size: auto;
background-image: url('http://www.lorempixel.com/400/400/');
}
This Pen doesn't use any external JavaScript resources.