Stretch an image by using CSS.

Stretching an image to fit the container and maintain aspect ratio by using CSS.

by Gus Rodriguez

HTML

<body class="city">
  <div class="bus small">
  </div>
  <div class="bus medium">
  </div>
</body>

CSS

.bus, 
.city{
   -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: contain;
    background-repeat: no-repeat;
}

.bus {
  background-image: url(http://i.imgur.com/fMiM8oO.jpg);
}

.city { 
  background-image: url(http://i.imgur.com/hxhhw94.jpg); 
}

.small, 
.medium {
  float: left;
}

.small {
   width: 300px;
   height:300px;   
}

.medium{
   width: 100px;
   height:100px; 
}