Как расположить картинки в определенном соотношении

Question

Есть блок с картинками на всю ширину сайта. Делиться на 4 строки картинок, при чем в первой их три и их ширина соотносится как 25%:50%:25% (процентов от ширины экрана), во второй - 50%:50%, в третьей 33:33:33, в четвертой 50:50. высота каждой картинки равна высоте строки, 350пикс. пробовал сделать флексами, не получилось из-за недостатка навыков. хотелось бы узнать как записать это кодом на css. спасибо

Answer 1

Если я правильно понял вопрос- вам нужно сохранить соотношение на каждой картинке, то можно попробовать так max-width: calc(16 / 9 * 100vh); Вы можете задать другое соотношение.

Answer 2

.galery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(4, 350px);
}

.galery img {
  width: 100%;
  height: 350px;
  object-fit: cover;
}

.galery img:nth-child(1) {
  grid-column: 1/4;
  grid-row: 1/2;
}

.galery img:nth-child(2) {
  grid-column: 4/10;
  grid-row: 1/2;
}

.galery img:nth-child(3) {
  grid-column: 10/13;
  grid-row: 1/2;
}

.galery img:nth-child(4) {
  grid-column: 1/7;
  grid-row: 2/3;
}

.galery img:nth-child(5) {
  grid-column: 7/13;
  grid-row: 2/3;
}

.galery img:nth-child(6) {
  grid-column: 1/5;
  grid-row: 3/4;
}

.galery img:nth-child(7) {
  grid-column: 5/9;
  grid-row: 3/4;
}

.galery img:nth-child(8) {
  grid-column: 9/13;
  grid-row: 3/4;
}

.galery img:nth-child(9) {
  grid-column: 1/7;
  grid-row: 4/5;
}

.galery img:nth-child(10) {
  grid-column: 7/13;
  grid-row: 4/5;
}

<div class="galery">
  <img src="https://loremflickr.com/250/350">
  <img src="https://loremflickr.com/500/350">
  <img src="https://loremflickr.com/251/350">
  <img src="https://loremflickr.com/504/350">
  <img src="https://loremflickr.com/501/350">
  <img src="https://loremflickr.com/333/350">
  <img src="https://loremflickr.com/334/350">
  <img src="https://loremflickr.com/335/350">
  <img src="https://loremflickr.com/502/350">
  <img src="https://loremflickr.com/503/350">
</div>

Answer 3

Вариант на Flexbox с имитацией gap (отступов)

.gallery {
  display: block;
  --gap: 5px;
  width: 100%;
  overflow: hidden;
}

.gallery .wrap {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  width: calc(100% + var(--gap, 0));
  margin-right: calc(var(--gap, 0) * -1);
  margin-bottom: calc(var(--gap, 0) * -1);
}

.gallery .wrap img {
  display: block;
  height: 150px;
  margin-right: var(--gap, 0);
  margin-bottom: var(--gap, 0);
  object-fit: cover;
}

.gallery .r25 {width: calc(25% - var(--gap, 0));}
.gallery .r33 {width: calc(33.33% - var(--gap, 0));}
.gallery .r50 {width: calc(50% - var(--gap, 0));}

<div class="gallery">
  <div class="wrap">
    <!-- 25 50 25 -->
    <img class="r25" src="//i.imgur.com/ClbJ7Ek.png">
    <img class="r50" src="//i.imgur.com/mCBt7vg.png">
    <img class="r25" src="//i.imgur.com/ClbJ7Ek.png">
    <!-- 50 50 -->
    <img class="r50" src="//i.imgur.com/mCBt7vg.png">
    <img class="r50" src="//i.imgur.com/mCBt7vg.png">
    <!-- 33 33 33 -->
    <img class="r33" src="//i.imgur.com/4Z3HEn8.png">
    <img class="r33" src="//i.imgur.com/4Z3HEn8.png">
    <img class="r33" src="//i.imgur.com/4Z3HEn8.png">
    <!-- 50 50 -->
    <img class="r50" src="//i.imgur.com/mCBt7vg.png">
    <img class="r50" src="//i.imgur.com/mCBt7vg.png">
  </div>
</div>

БЛОГ НА HUSL

Как расположить картинки в определенном соотношении

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