Edit in JSFiddle

body {
  font-family: 'Dancing Script', cursive;
  background-image: linear-gradient(45deg, #F7CAC9 15%, #91A8D0 85%);
}

.h1 {
  margin: 1em;
  color: rgba(white, .85);
}

.wrap {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.inner {
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
}

.img-box {
  height: 0;
  margin: 15px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  &:nth-child(1) {
    width: 100%;
    padding-top: calc(900 / 1200 * 100%);
    background-image: url('http://placekitten.com/1200/900');
  }
  &:nth-child(2) {
    width: 80%;
    padding-top: calc(300 / 700 * 80%);
    background-image: url('http://placekitten.com/700/300');
  }
  &:nth-child(3) {
    width: 120%;
    padding-top: calc(500 / 1200 * 120%);
    background-image: url('http://placekitten.com/1200/500');
  }
}

<h1 class="h1 font-weight-bold text-xs-center text-capitalize">responsive background image cats</h1>

<div class="wrap">
  <div class="inner">
    <div class="img-box"></div>
    <div class="img-box"></div>
    <div class="img-box"></div>
  </div>
</div>