Есть картинка внутри блока, которая служит фоном (задать бэкграундом нет возможности в данном случае), высота задана фиксирована, ширина не фиксирована. И нужно при уменьшении экрана сделать так, чтобы центр картинки оставался всегда в видимой части, а края картинки скрывались за пределами дисплея, сейчас же при уменьшении экрана остается видимой левая часть картинки, а правая начинает скрываться, а нужно чтобы центр картинки был всегда в центра дисплея.
Так же все это дело проиходит внутри слайдера slick.js
.main-slider__slide {
height: 300px;
}
.main-slider__slide_img {
height: 100%;
position: absolute;
overflow: hidden;
}
.main-slider__slide_img img {
height: 100%;
width: auto;
}
<div class = "main-slider__slide">
<div class = "main-slider__slide_img">
<img src="http://pokemongogid.ru/wp-content/uploads/2016/08/kak-poluchit-pikachu-v-pokemon-go6-1024x1024.jpg" alt = "">
</div>
</div>
left: 50%; transform: translateX(-50%);