0

Как сверстать галерею фото на flex, используя только CSS по заданному html-шаблону, который нельзя менять?

Задача:

  1. Первый вариант строго по 4 фото в ряд, но чтобы не зависело от ширины экрана. То есть при ширине 1000px ширина фото должна быть 250px c отступами и рамками, при ширине 1200 — 300 на каждое фото, тогда их будет по 4 в ряд и т. д.

  2. Второй вариант с переменным количеством в ряду (это зависит от ширины экрана), но с фиксированным размером рамки 150px на 150px.

  3. Фото разных (любых) размеров и пропорций, добавив рамку чтобы смотрелось ровно.

  4. Html-разметка для обоих вариантов должна быть одинаковой.

Решение необходимо сделать на основе этого шаблона:

<style>.wrap div  {border: 1px solid grey;padding:3px}</style>
<div class="wrap">
<div><img src="01.jpg" alt="Изображение 01"></div>
<div><img src="02.jpg" alt="Изображение 02"></div>
<div><img src="03.jpg" alt="Изображение 03"></div>
<div><img src="04.jpg" alt="Изображение 04"></div>
<div><img src="05.jpg" alt="Изображение 05"></div>
<div><img src="06.jpg" alt="Изображение 06"></div>
<div class="seven"><img src="07.jpg" alt="Изображение 07"></div>
<div><img src="08.jpg" alt="Изображение 08"></div>
</div>
4
  • 2
    У нас тут сообщество, которое помогает разобраться в проблеме и решить вопрос, который вы пытались решить, но не справились. Вы же поставили вопрос так, словно необходимо выполнить работу для вас. Не надо так.
    – Rijen
    Commented 16 окт. 2024 в 18:33
  • Про динамическую ширину блоков в calc ответили, чтобы их по 4 вписывалось. Но дополню, что с такой постановкой задачи там проще использовать display: grid.
    – Alex Krass
    Commented 16 окт. 2024 в 18:47
  • @AlexKrass, ой, я не совсем понял, я думал речь идёт про два ряда, когда в вопросе две задачи.
    – Rijen
    Commented 16 окт. 2024 в 20:55
  • Чисто математически у 1000 пикселей не может быть 4 блока по 250 пикселей с отступами)). Commented 17 окт. 2024 в 5:21

1 ответ 1

2

Не совсем понятно каким должны быть последующие ряды.

Для того чтобы разбить все изображение по рядам - используй flex-wrap

Чтобы красиво вписать изображение в квадрат - fit-object

Чтобы первые 4 изображение были одним стилем, а остальные другим - используй :nth-child

.wrap{
  display:flex;
  flex-wrap:wrap;
  width:100%;
   justify-content:space-around; 
}
.wrap>div>img{
  width:100%;
  height:100%;
  object-fit:cover;
  
}
.wrap>div{
  border-radius:15px;
  margin:5px;
  overflow:hidden;
  
}
.wrap>div:nth-child(-n+4){
  width:calc(25% - 10px);
  height:300px;
}

.wrap>div:nth-child(n+5){
/*   display:none; */
  width:150px;
  height:150px;
  
}
 <div class="wrap">
    <div><img src="https://picsum.photos/seed/p1/800/600" alt="Изображение 01"></div>
    <div><img src="https://picsum.photos/seed/p2/600/300" alt="Изображение 02"></div>
    <div><img src="https://picsum.photos/seed/p3/600/800" alt="Изображение 03"></div>
    <div><img src="https://picsum.photos/seed/p4/800/600" alt="Изображение 04"></div>
    <div><img src="https://picsum.photos/seed/p5/800/600" alt="Изображение 05"></div>
    <div><img src="https://picsum.photos/seed/p6/800/600" alt="Изображение 06"></div>
    <div class="seven"><img src="https://picsum.photos/seed/p7/800/600" alt="Изображение 07"></div>
    <div><img src="https://picsum.photos/seed/p8/800/600" alt="Изображение 08"></div>
    </div>

7
  • вместо object-fit: cover лучше применить object-fit:contain поскольку в противном случае картинка будет обрезаться
    – Yuriy
    Commented 17 окт. 2024 в 6:29
  • необходимо, чтобы фото из первого ряда шли строго по 4 фото в ряд, пропорционально сжимаясь на узких экранах, остальные 4 фото не должны сжиматься, но могут переноситься на следующий ряд в варианте предложенном выше, первые 3 фото сжимаются, но не переносятся, а четвертое фото которое должно вести себя также как первые 3, все равно переносится, хотя и сжимается
    – Yuriy
    Commented 17 окт. 2024 в 7:15
  • @Yuriy Да не может такого быть. Покажите скриншот. Учтите, что в примере решены обе задачи, указанные выше.
    – Rijen
    Commented 17 окт. 2024 в 8:25
  • @Yuriy про object-fit - тут, как говорится, можете использовать на свой вкус. Зависит от изображения.
    – Rijen
    Commented 17 окт. 2024 в 8:28
  • спасибо за помощь, проблему решил следующим образом вместо width:calc(25% - 10px); указал width:calc(25% - 12px); поскольку у меня кроме margin:5px для div были еще установлены 2 размера рамок : 1px для внешнего контейнера wrap и столько же для внутренней рамки div
    – Yuriy
    Commented 17 окт. 2024 в 8:43

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.