Edit in JSFiddle

<div class="default height-fullwindow cover">&nbsp;</div>

<div class="default height-fullwindow contain">&nbsp;</div>

<div class="default toppadded-100auto">&nbsp;</div>

<div class="default toppadded-100auto media-query">&nbsp;</div>

.default {
  background-image: url(https://placehold.it/1000x750);
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  /*added a border just to outline/show the container*/
  border: 1px solid #ff0000;
  /*added bottom margin to space the examples out*/
  margin: 0 0 10px 0;
}
.height-fullwindow {
  height: 100vh;
}
.cover {
  background-size: cover;
}
.contain {
  background-size: contain;
}
.toppadded-100auto {
  padding-top: 70%;
  background-size: 100% auto;
}

@media (max-width: 400px) {
  .media-query {
    background-image: url(https://placehold.it/400x100);
    padding-top: 20%;
   }
}