Начальные изображения в перекрывающихся столбцах

Я пытался заставить 3 изображения реагировать, используя столбцы начальной загрузки. Они кажутся отзывчивыми, но проблема в том, что изображения перекрываются, за исключением последнего столбца, который остается нормальным.

<div class="row">
      <div class="col-sm-2 offset-sm-3">
            <img class="img-responsive" src="../assets/images/roy-creates-categories-02.png">
        </div>
        <div class="col-sm-2">
            <img class="img-responsive" src="../assets/images/roy-creates-categories-02.png">
        </div>
        <div class="col-sm-2">
          <img class="img-responsive" src="../assets/images/roy-creates-categories-02.png">
        </div>
  </div>

введите здесь описание изображения Я бы хотел, чтобы все 3 столбца понравились столбцу справа.

Я пытался добавить класс «img-responsive» и «img-fluid», но ни один из них не работал.

Я использую бутстрап 4.0.


html responsive bootstrap-4
person Roy Zohan    schedule 19.12.2018    source источник
comment
Приведенный выше код не должен перекрываться; у вас должно быть три col-2 изображения, равномерно распределенных с ровными col-3 полями с каждой стороны. Не могли бы вы убедиться, что предоставили минимальный, полный и поддающийся проверке пример проблемы?   -  person Obsidian Age    schedule 19.12.2018
comment
Почему вы смещаете первый столбец? Это изменит то, как он взаимодействует с двумя другими столбцами.   -  person Nathaniel Flick    schedule 19.12.2018
comment
Смещение, потому что я хочу, чтобы 3 изображения были центрированы на странице   -  person Roy Zohan    schedule 19.12.2018
comment
@NathanielFlick, даже если я удалю смещение, он все равно сделает то же самое   -  person Roy Zohan    schedule 19.12.2018

Ответы (1)


arrow_upward
0
arrow_downward

Изображения переполняют свой контейнер. Изображение справа имеет полную высоту, но оно переполняет контейнер. Использование загрузчика '.col-2' означает, что вы ограничиваете ширину столбца на основе ширины окна. Вы можете использовать background правила css вместо элементов img, чтобы обеспечить сдерживание или охват изображений, или вы можете просто использовать .col-auto вместо .col-2 с .justify-content-center, если у вас есть изображения соответствующего размера.

Все три примера в сниппете.

.row {
 min-height: 150px;
 }

.col-auto {
  background-color: green;
}

.col-sm-2 {
  background-color: red;
}

.bg-image {
  width: 100%;
  height: 100%;
  background-image: url("https://picsum.photos/100");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.bg-image.bg-image--cover {
  background-size: cover;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row justify-content-center">
  <div class="col-auto">
    <img class="img-fluid" src="https://picsum.photos/100">
  </div>
  <div class="col-auto">
    <img class="img-fluid" src="https://picsum.photos/100">
  </div>
  <div class="col-auto">
    <img class="img-fluid" src="https://picsum.photos/100">
  </div>
</div>

<div class="row">
  <div class="col-sm-2 offset-sm-3">
    <div class="bg-image"></div>
  </div>
  <div class="col-sm-2">
    <div class="bg-image"></div>
  </div>
  <div class="col-sm-2">
    <div class="bg-image"></div>
  </div>
</div>

<div class="row">
  <div class="col-sm-2 offset-sm-3">
    <div class="bg-image bg-image--cover"></div>
  </div>
  <div class="col-sm-2">
    <div class="bg-image bg-image--cover"></div>
  </div>
  <div class="col-sm-2">
    <div class="bg-image bg-image--cover"></div>
  </div>
</div>

person JasonB    schedule 19.12.2018