StackOverflow - Resize image dinamically with media queries

http://stackoverflow.com/questions/33703586/resize-image-dynamically-with-css/37166995#37166995

by Alexandre Azevedo

HTML

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

CSS

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

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

@media only screen and (max-width: 720px){
  .image {
    width: 200px;
    height: 150px
  }
}