Загрузочные изображения в перекрывающихся столбцах - PullRequest
Новая
       50

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

0 голосов
/ 19 декабря 2018

Я пытался заставить 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>

enter image description here Мне бы хотелось, чтобы все 3 столбца понравилисьодин полностью справа.

Я попытался добавить класс "img-responseive" и "img-liquid", но ни один из них не сработал.

Я использую загрузчик 4.0.

1 Ответ

0 голосов
/ 19 декабря 2018

Изображения переполняют их контейнер.Изображение справа имеет полную высоту, но оно выходит за пределы контейнера.Использование начальной загрузки .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>
...