StackOverflow - Background cover

http://stackoverflow.com/questions/23372206/resize-image-with-css-not-using-crop-method/37166475#37166475 http://stackoverflow.com/questions/13586755/how-to-dynamically-resize-image-in-css/37166549#37166549 http://stackoverflow.com/questions/37164809/how-to-resize-image-in-div-to-cover/37165842#37165842

by Alexandre Azevedo

HTML

<div class="cover vertical"></div>
<div class="cover horizontal"></div>

CSS

.cover {
  background-color: #ddd;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 10px;
}

.vertical {
  background-image: url('http://a1.mzstatic.com/us/r30/Purple6/v4/ed/9a/76/ed9a765e-21b2-4fd4-1a88-e22e82a94c57/screen322x572.jpeg');
  width: 300px;
  height: 200px;
}

.horizontal {
  background-image: url('https://c1.staticflickr.com/8/7405/26324518664_0d4e70e511_n.jpg');
  width: 200px;
  height: 300px;
}