title: How to fixed and center image on media screen @media (max-width: 480px)
body: <p>I'm using owl carousel and i don't want the image to be squeezed or compressed on mobile size </p>
  
  <pre><code>   &lt;!--=========================slider===========================--&gt;
    &lt;div id="main-slider" class="owl-carousel owl-theme"&gt;
      &lt;div class="item text-center"&gt;
        &lt;img src="img/front_girl1.jpg"&gt;
      &lt;/div&gt;
      &lt;div class="item text-center"&gt;
        &lt;img src="img/front_girl_3.jpg"&gt;
      &lt;/div&gt;
      &lt;div class="item text-center"&gt;
        &lt;img src="img/front_girl_2.jpg"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>My CSS on media screen 1200px</p>
  
  <pre><code>#main-slider .item img{
   display: block;
   width: 100%;
   height:700px;
   z-index: -1;
  }
  </code></pre>
  
  <p>My CSS on 480px but its not working when i resize the browser it's just compressed</p>
  
  <pre><code>#main-slider .item img{
      display: block;
      width: 100%;
      height:700px;
      background-position: center center fixed;
      z-index: -1;
  }
  </code></pre>
  
  <p>Any suggestions ???</p>