<h1>css background-image RWD</h1> 
<div class="">
  
</div>

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      <div class="img wolf"></div>
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>
h1{ 
  text-align: center; 
} 
.img{ 
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center; 
  height: 0;
} 
.wolf{
  background-image: url("http://p3.pstatp.com/origin/2ee200021b01de8df129");
  padding-top: 1050 / 1680 * 100%; /* (img-height / img-width * container-width) *//* (1050 / 1680 * 100) */
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.