title: How do you prevent resizing of images in CSS?
body: <p>I have the following code to create a gallery of images. They need to be responsive. But the problem is, when the window width changes, the images also get resized and lose their aspect ratios. </p>
  
  <p>How can I fix this? I am new to CSS.</p>
  
  <pre><code>* {
      padding: 0;
      margin: 0;
  }
  
  /*HEADER STYLES*/
  
  .header {
      width: 80%;
      margin: 30px auto;
      overflow: hidden;
  }
  
  
  .word:hover{
  opacity: 0.9; 
       -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
       -o-transition: all .5s ease;
       -ms-transition: all .5s ease;
        transition: all .5s ease;
  } 
  .word { 
  
       -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
       -o-transition: all .5s ease;
       -ms-transition: all .5s ease;
        transition: all .5s ease;
  
      border-radius: 5px;
      background:url(huzup.jpg);
      background-size:100% 100%;
      background-repeat:no-repeat;
  
      color:white;
      font-size:20px;
      font-family: 'Russo One', sans-serif;
  
      height:100PX;
      width:180PX;
      text-align:center;
      border:1px solid silver;
      display: table-cell;
      vertical-align:middle;
  }
  
  .container {
      width: 80%;
      margin: 30px auto;
      overflow: hidden;
  }
  
  /*GALLERY STYLES*/
  .galleryItem {
      color: #797478;
      font: 10px/1.5 Verdana, Helvetica, sans-serif;
      width: 16%;
      margin:  2% 2% 50px 2%;
      float: left;
      -webkit-transition: color 0.5s ease;
  }
  
  .galleryItem h3 {
      text-transform: uppercase;
      line-height: 2;
  }
  
  .galleryItem:hover {
      color: #000;
  }
  
  .galleryItem img {
      max-width: 100%;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
  }
  
  
  
  /* MEDIA QUERIES*/
  @media only screen and (max-width : 940px),
  only screen and (max-device-width : 940px){
      .galleryItem {width: 21%;}
  }
  
  @media only screen and (max-width : 720px),
  only screen and (max-device-width : 720px){
      .galleryItem {width: 29.33333%;}
      .header h1 {font-size: 40px;}
  }
  
  @media only screen and (max-width : 530px),
  only screen and (max-device-width : 530px){
      .galleryItem {width: 46%;}
      .header h1 {font-size: 28px;}
  }
  
  @media only screen and (max-width : 320px),
  only screen and (max-device-width : 320px){
      .galleryItem {width: 96%;}
      .galleryItem img {width: 96%;}
      .galleryItem h3 {font-size: 18px;}
      .galleryItem p, .header p {font-size: 18px;}
      .header h1 {font-size: 70px;}
  }
  </code></pre>