Как разместить картинки на всю ширину экрана?

Question

Нужна помощь, как разместить эти 8 картинок, как на макете? Использую бутстрап 4.

    <div class="work-cards-container">
    <div class="work-cards">
        <img src="img/work_card_1.png" alt="" class="work-cards-img">
        <img src="img/work_card_2.png" alt="" class="work-cards-img">
        <img src="img/work_card_3.png" alt="" class="work-cards-img">
        <img src="img/work_card_4.png" alt="" class="work-cards-img">
        <img src="img/work_card_5.png" alt="" class="work-cards-img">
        <img src="img/work_card_6.png" alt="" class="work-cards-img">
        <img src="img/work_card_7.png" alt="" class="work-cards-img">
        <img src="img/work_card_8.png" alt="" class="work-cards-img">
    </div>
  </div>

Что нужно прописать в css, чтобы все было как по макету?

Answer 1

В интернете же полно генераторов на flexbox и grid. Не понимаю, зачем вы мучаетесь?!

* {
  box-sizing: border-box;
}

.sonderklasse {
  display: flex;
  height: 300px;
  flex-wrap: wrap;
}

.sonderklasse img {
  width: 25%;
  height: 150px;
  margin: 0px;
  padding: 0px;
  object-fit: cover;
}

<div class="sonderklasse">
  <img src="https://images.unsplash.com/photo-1606684889099-462c2847473b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&q=80" />
  <img src="https://images.unsplash.com/photo-1606676366792-ef4924fefb82?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&q=80" />
  <img src="https://images.unsplash.com/photo-1606746977360-8c4bc10d3573?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&q=80" />
  <img src="https://images.unsplash.com/photo-1606623745407-fee6bc803d59?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&q=80" />
  <img src="https://images.unsplash.com/photo-1606698235008-0b44ca6f7594?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&q=80" />
  <img src="https://images.unsplash.com/photo-1572916239238-cdd76c4b2c62?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=256&q=80" />
  <img src="https://images.unsplash.com/photo-1593642532842-98d0fd5ebc1a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=256&q=80" />
  <img src="https://images.unsplash.com/photo-1606695124420-f8aeb8504492?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&q=80" />
</div>

БЛОГ НА HUSL

Как разместить картинки на всю ширину экрана?

Ответы (1 шт):