0

Есть картинка внутри блока, которая служит фоном (задать бэкграундом нет возможности в данном случае), высота задана фиксирована, ширина не фиксирована. И нужно при уменьшении экрана сделать так, чтобы центр картинки оставался всегда в видимой части, а края картинки скрывались за пределами дисплея, сейчас же при уменьшении экрана остается видимой левая часть картинки, а правая начинает скрываться, а нужно чтобы центр картинки был всегда в центра дисплея.

Так же все это дело проиходит внутри слайдера 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>

3
  • 3
    Для класса "main-slider__slide_img" добавьте: left: 50%; transform: translateX(-50%);
    – Deonis
    Commented 24 янв. 2018 в 19:19
  • Левый край картинки не сможет скрываться, если только по центру расположить
    – Arthur
    Commented 24 янв. 2018 в 19:21
  • @Deonis просто даже если делаю left:1px; картинка куда-то исчезает. Это все внутри слайдера происходит, скорее всего он такое делает Commented 24 янв. 2018 в 19:25

1 ответ 1

1

.main-slider__slide {
  height: 300px;
  position: relative;
}

.main-slider__slide_img {
  height: 100%;
  position: absolute;
  overflow: hidden;
  left: 50%;
  transform: translateX(-50%);
}

.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>

2
  • да, так и есть, протестил на статических элементах. Но на слайдере картинка обрезается( Commented 24 янв. 2018 в 20:22
  • хотя нет, все равно не центрируется Commented 24 янв. 2018 в 20:28

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.