Same height images

HTML

<div class="row">
  <div class="image bg1">

  </div>
  <div class="image bg2">

  </div>
  <div class="image bg3">

  </div>
</div>

SCSS

.image {
  float: left;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 200px;
  height: 120px;
}

.bg1 {
  background-image: url(http://www.sftravel.com/sites/sftraveldev.prod.acquia-sites.com/files/styles/sft_390x675_dark/public/alternative-portraits/Skyline-San-Francisco-at-Dusk_2.jpg?itok=FTSuT4Sf&timestamp=1515701696);
}

.bg2 {
  background-image: url(https://lonelyplanetimages.imgix.net/a/g/hi/t/9cf024dfd5c0bcb2b17f4785340145ea-san-francisco.jpg?sharp=10&vib=20&w=2000);
}

.bg3 {
  background-image: url(http://static4.uk.businessinsider.com/image/5ac39fa97708e9798137d136-1000/shutterstock566076799.jpg);
}