Нужно сверстать блок 6x2 состоящий из изображений идентичного размера

Question

Нужно сверстать блок 6x2 состоящий из изображений идентичного размера. Блок должен занимать 100% ширины страницы и адаптироваться к ее размерам при изменении ее ширины.

Answer 1

<style>
      .first-line, .second-line{
            display: flex;
            flex-direction: row;
            width: 100vw;
            margin:0;
            padding:0;
      }
      img{  
            width:16.5%;
            padding:0;
            margin:0;
            border:none;
      }
</style>

<body>
      <div class="first-line">
            <img src="https://img.icons8.com/ios/452/stackoverflow.png">
            <img src="https://img.icons8.com/ios/452/stackoverflow.png">
            <img src="https://img.icons8.com/ios/452/stackoverflow.png">
            <img src="https://img.icons8.com/ios/452/stackoverflow.png">
            <img src="https://img.icons8.com/ios/452/stackoverflow.png">
            <img src="https://img.icons8.com/ios/452/stackoverflow.png">
      </div>
      <div class="second-line">
            <img src="https://img.icons8.com/ios/452/stackoverflow.png">
            <img src="https://img.icons8.com/ios/452/stackoverflow.png">
            <img src="https://img.icons8.com/ios/452/stackoverflow.png">
            <img src="https://img.icons8.com/ios/452/stackoverflow.png">
            <img src="https://img.icons8.com/ios/452/stackoverflow.png">
            <img src="https://img.icons8.com/ios/452/stackoverflow.png">
      </div>
</body>

Answer 2

Если изображения квадратные, то тут всё просто:

body { margin: 0; }
.block_thumbs { display: flex; flex-flow: row wrap; }
.block_thumbs > img { max-width: calc(100% / 6); }

<div class="block_thumbs">
  <img src="https://picsum.photos/400"><img src="https://picsum.photos/401">
  <img src="https://picsum.photos/402"><img src="https://picsum.photos/403">
  <img src="https://picsum.photos/404"><img src="https://picsum.photos/405">
  <img src="https://picsum.photos/406"><img src="https://picsum.photos/407">
  <img src="https://picsum.photos/408"><img src="https://picsum.photos/409">
  <img src="https://picsum.photos/410"><img src="https://picsum.photos/411">
</div>

Если стороны изображения имеют разный размер, тогда чуть сложнее:

body { margin: 0; }

.block_thumbs {
  display: flex;
  flex-flow: row wrap;
}

.block_thumbs>div {
  position: relative;
  width: 100%;
  max-width: calc(100% / 6);
}
.block_thumbs>div::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.block_thumbs>div>img {
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

<div class="block_thumbs">
  <div><img src="https://picsum.photos/400/100"></div>
  <div><img src="https://picsum.photos/401/250"></div>
  <div><img src="https://picsum.photos/402/300"></div>
  <div><img src="https://picsum.photos/403/150"></div>
  <div><img src="https://picsum.photos/404/350"></div>
  <div><img src="https://picsum.photos/405/400"></div>
  <div><img src="https://picsum.photos/406/450"></div>
  <div><img src="https://picsum.photos/407/500"></div>
  <div><img src="https://picsum.photos/408/550"></div>
  <div><img src="https://picsum.photos/409/175"></div>
  <div><img src="https://picsum.photos/410/200"></div>
  <div><img src="https://picsum.photos/411/325"></div>
</div>

БЛОГ НА HUSL

Нужно сверстать блок 6x2 состоящий из изображений идентичного размера

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