title: Slick slider cropped images
body: <p>I use click slider <a href="http://kenwheeler.github.io/slick/" rel="nofollow noreferrer">http://kenwheeler.github.io/slick/</a>, main display size for slider is 1920 px, but if size becomes smaller images become cropped.
  here is my code</p>
  
  <pre><code>&lt;div id = "main-slider"&gt;
    &lt;div class = "main-slider__slide"&gt;
      &lt;div class = "main-slider__slide_img"&gt;
        &lt;img src="" alt = ""&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But I think better to see on the url <a href="http://evrika.tests1.enlight.studio/" rel="nofollow noreferrer">http://evrika.tests1.enlight.studio/</a> because plugin ads lots of additional html and css</p>
  
  <pre><code>$('#main-slider').slick({
      dots: true,
      slidesToShow: 1,
      arrows: false,
      slidesToScroll: 1,
      centerMode: true,
      centerPadding: '0px',
  });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/x5QtB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/x5QtB.jpg" alt="here is for 1920px"></a></p>
  
  <p><a href="https://i.stack.imgur.com/h2UuW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h2UuW.png" alt="and here is for 500px"></a></p>
  
  <p>How can I make images centered?</p>