StackOverflow - Resize image dinamically with media queries in best resolution

http://stackoverflow.com/questions/14157906/resize-images-by-css/37166871#37166871

by Alexandre Azevedo

HTML

<div class="image image1"></div>
<div class="image image2"></div>

CSS

.image {
  background-color: #ddd;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 10px;
  width: 200px;
  height: 150px;
}

.image1 {
  background-image: url('https://c1.staticflickr.com/8/7405/26324518664_0d4e70e511_n.jpg');
}

.image2 {
  background-image: url('http://c2.staticflickr.com/8/7149/26855282121_fb57a99f0c_n.jpg');
}

@media only screen and (max-width: 880px){
  .image {
    width: 60px;
    height: 40px
  }
  .image1 {
    background-image: url('https://c1.staticflickr.com/8/7405/26324518664_0d4e70e511_s.jpg');
  }
  .image2 {
    background-image: url('http://c2.staticflickr.com/8/7149/26855282121_fb57a99f0c_s.jpg');
  }
}