Центр изображения с положением относительно маленького экрана

Question

У меня есть таблица из нескольких пар изображений-описаний. На большом экране изображения выровнены по горизонтали. Проблема в том, что на маленьких экранах (xs) изображения не центрированы (текст да).

Я попробовал этот код Центральное положение: относительное деление Это решение центрирует изображение, но из-за полей появляется горизонтальная прокрутка на мобильном телефоне.

js Скрипка одного изображения: https://jsfiddle.net/oca1wvmu/

HTML-код (на большом экране четыре изображения по строкам, но на экране мобильного устройства отображается только одно за другим):

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 mt-2">
      <figure class="memberBoxImage">
        <img class="memberImgFront" src="https://placekitten.com/200/200">
        <img class="memberImgBack" src="https://lorempixel.com/200/200">       
      </figure>
      <div class="memberBoxDescription">
        <h4>Little text</h4>
        <p>More little text</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 mt-2"></div>
    <div class="col-xs-12 col-sm-6 col-md-3 mt-2"></div>
    <div class="col-xs-12 col-sm-6 col-md-3 mt-2"></div>
  </div>
</div> 

CSS:

.memberBoxImage {
  position: relative;
}

.memberBoxImage img {
    position: absolute;
    top: 0;
    left: 0;
}

.memberImgFront {
    z-index: 1;
}

.memberImgBack {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    visibility: hidden;
}

.memberBoxImage:hover .memberImgFront {
  visibility: hidden;
}

.memberBoxImage:hover .memberImgBack {
  visibility: visible;
}

.memberBoxDescription {
  margin-top: 210px;
    text-align: center;
}

Подводя итог, я хочу центрировать изображение на маленьком экране.

Answer 1

Я использовал другой подход и в основном избавился от абсолютного позиционирования.Вот минимальный пример:

.memberBoxImage img.memberImgFront {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
}

.memberBoxImage:hover .memberImgFront {
  visibility: visible;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-3 mt-2 text-center md-text-left">
      <figure class="memberBoxImage position-relative d-inline-block">
        <img class="memberImgBack" src="https://lorempixel.com/200/200">
        <img class="memberImgFront" src="https://placekitten.com/200/200">
      </figure>
      <div class="memberBoxDescription text-center">
        <h4>Little text</h4>
        <p>More little text</p>
      </div>
    </div>
  </div>
</div>

Answer 2

ну само изображение не центрировано, так как использует:

.memberBoxImage img {
    position: absolute;
    top: 0;
    left: 0;
}

Вы можете центрировать его по горизонтали, внутри div, используя:

.memberBoxImage img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

Если вы хотите убедиться, что он не станет больше контейнера, вы можете добавить width: 100%;.