display image in different resolution

Question

I have created an sample code to see an image in different resolution such as tablet, mobile and desktop, the code is working but actually I want to see all these resolution within the desktop itself which is not working . My code is as given below

Can anyone please tell me some solution for this.

JSFiddle

Css

@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .box1 {
      width: 480px;
      padding-bottom: 100%;
   }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   .box2 {
      width: 50%;
      padding-bottom: 50%;
   }
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Small desktop / ipad view: 3 tiles */
   .box3 {
      width: 33.3%;
      padding-bottom: 33.3%;
   }
}
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   .box4 {
      width: 25%;
      padding-bottom: 25%;
   }
}

Answer 1

This seems to work:

   /* Smartphone view: 1 tile */
   .box1 {
      display: block;
      width : 480px;
   }
   /* Tablet view: 2 tiles */
   .box2 {
      display: block;
      width  : 650px;
   }
   /* Small desktop / ipad view: 3 tiles */
    .box3 {
      display: block;
      width  : 1050px;
   }
   /* Medium desktop: 4 tiles */
   .box4 {
      display: block;
      width: 1290px;
   }

JSFIDDLE DEMO