Изменение ширины в зависимости от количества изображений и определения размеров изображений в гибкой рамке - PullRequest
Новая
       58

Изменение ширины в зависимости от количества изображений и определения размеров изображений в гибкой рамке

1 голос
/ 06 октября 2019

это мой первый пост здесь. Я делаю личную страницу проекта, которая отображает несколько изображений. Некоторые изображения будут иметь подписи, некоторые изображения будут иметь несколько изображений в одном контейнере с рисунками и т. Д. Однако я сталкиваюсь с несколькими проблемами при попытке использовать flexbox для разметки всех рисунков.

A) Все изображения имеютразной высоты и ширины. Мне трудно заставить все изображения иметь надлежащие размеры, которые не являются слишком маленькими или слишком большими.

B) Я пытаюсь сделать так, чтобы рисунки были разными, реагируя на размеры ширинына ширину изображения и сколько изображений есть. Это особенно проблема, когда имеется более одного изображения.

B.2) Когда у фигуры есть несколько изображений внутри, иногда они помещаются друг под другом. Это выглядит неопрятно, и я хочу, чтобы изображения оставались в одном ряду.

C) Пытаясь расположить все внутри фигур.

Я попытался решить эту проблему, выполнив следующее ...

A) Я пытался использовать max-width / max-height, но я понял, что это просто делает все огромным.

B & B.2) Я попытался поместить flexbox в фигуры, ноэто просто вызвало проблему, показанную в #fiveitems. Я не могу заставить цифру p оставаться над изображениями, как на других рисунках.

C) Я пробовал такие вещи, как выравнивание текста, и я не мог понять, что можно использовать для центрирования изображений.

Кодовая ручка со всем моим кодом

https://codepen.io/marchesn/pen/poooZLY

CSS 

figure
{
 height: 30%;
 width: 30%;
 padding: .4em;
 border-radius: .5em;
 background-color: white;
 margin: .2em;
}
figure p
{
 height: 15%;
 width: 100%;
 margin: .1em;
 text-align: center;
 font-size: 1em;
 font-weight: bold;
 color: #333333;
}
figcaption
{
 width: 100%;
 margin-top: .5em;
 margin-bottom: .2em;
 text-align: center;
 border-radius: .3em;
 background-color: #9ad6e5;
}
figure img
{
 max-width: 35%;
 max-height: 35%;
}
#fiveitems
{
 width: auto;
 display: flex;
 flex-flow: row;    
}
#fiveitems p
{
 width: 100%;
}
#fiveitems img
{
 width: 40%;
}

Я ищу решения, которые бы

A) Размеры изображений были бы удобочитаемым размером независимо от их фактической ширины / высоты.

B & B.2) Размеры имеют размеры по ширине в зависимости от количества изображений внутри них и для отображения широкого диапазона изображений с размером, который делает их читаемыми, при этом изгибаясь. Например, я думаю, что рисунок #fiveitems должен занимать целый ряд, но рисунки с одним изображением должны иметь меньшую ширину.

C) Центрировать элементы внутри фигур.

Изображение того, как оно должно выглядеть https://i.imgur.com/7KXvuVD.png

...