Тексты разных размеров под картинкой

@bamsik-bamsik · Регистрация: 07.05.2020

Студворк — интернет-сервис помощи студентам

Такая ситация - во флекс контейнере установлены изображения одинакового размера. Тексты под ними разного размера.
И чем больше текст тем больше увеличивается изображение. Как результат - изображения получается разных размеров. Как поправить . Применение flex-grow к элементам флекс контейнера результата не дало.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="my-flex-cont1">
<div class="my-flex-box" style="text-align: center;"><img class="aligncenter wp-image-42" src="https://ytropa.ru/wp-content/uploads/2023/11/1954-300x225.jpg" alt="" width="400" height="300" /></div>
<div class="my-flex-box">
 
<img class="size-medium wp-image-43 aligncenter" src="https://ytropa.ru/wp-content/uploads/2023/11/a-vot-mne-tri-goda.-vsjo-eshhjo-vperedi.-znal-by-chto-vsjo-ravno-by-ulybalsja.-jeto-u-nas-familnoe._obrabotano-300x295.jpg" alt="" width="700" height="995" />
 
Здесь мне три года
 
</div>
<div class="my-flex-box"><img class="aligncenter wp-image-46" src="https://ytropa.ru/wp-content/uploads/2023/11/na-lyzhnoj-progulke.-1957jpg-300x207.jpg" alt="" width="434" height="300" /></div>
<div class="my-flex-box">
 
<img class="aligncenter wp-image-45" src="https://ytropa.ru/wp-content/uploads/2023/11/moj-djadja-misha-8-go-maja-1945-goda-shjol-po-berlinu-i-uvidel-staruju-slomannuju-raskladushku.-otpilil-ot-nejo-trubku-prodelal-v-nej-dyrochki-i-vstavil-mundshtuk-poluchilas-dudka-300x293.jpg" alt="" width="307" height="300" />
 
Мой дядя Миша 8-го мая 1945 года шёл по Берлину и увидел старую сломанную раскладушку. Отпилил от неё трубку, проделал в ней дырочки и вставил мундштук, получилась дудка
 
</div>
<div class="my-flex-box"><img class="wp-image-44 aligncenter" src="https://ytropa.ru/wp-content/uploads/2023/11/a-mne-tut-7-let-i-jeto-moja-dudka._obrabotano-300x172.jpg" alt="" width="524" height="300" /></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.my-flex-cont1
{
    display: flex;
    flex-wrap: nowrap;
    flex-direction:row;
    justify-content: space-between;
  width: 100%;
  align-content: center;
}
    .my-flex-box1
{ 
    margin: 5px;
    padding: 5px;
    border:solid  1px #6B8E23;
}

@ivanov_333 · 12.11.2023, 13:49

bamsik-bamsik,

Да, но в твой HTML файл за каждое изображение установлен разный размер!

HTML5
1
2
3
4
5
 img 1:  width="400" height="300"
 img 2:  width="700" height="995"
 img 3:  width="434" height="300"
 img 4:  width="307" height="300"
 img 5:  width="524" height="300"

И нигде в CSS файле(хоть из того кода, который ты дал) не видно установки одинаковых размеров изображений!

И в CSS файл должно будет: .my-flex-box, а не .my-flex-box1 - если хочеш, чтобы относиться к <div class="my-flex-box">

И еще несколко рекомендации:

1. Не оставляй свойство alt пустое! Пиши в его - короче, что содержит изображение!
2. Не пиши так "голый" текст - а поставляй текст в теги параграфа!
3. Пиши код в CSS файле в таком форматирование:

CSS
1
2
3
4
5
6
.my-flex-cont1 {
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
   width: 100%;
}

п.с. Если хочеш, чтобы изображния имеют одинаковые размеры - надо явно установишь это!

Но имеей ввиду, что по такой способ изображения будут несоразмерные и получиться нехороший эффект!

@bamsik-bamsik · 12.11.2023, 16:07 **[ТС]**

Спасибо за ответ. Насчет изображений. Этот флекс контейнер уставнавливается на странице сайта вордпресс. Изначально все картинки имеют разный размер. Чтобы они смотрелись ровно настройщиком самого вордпресса устанавливается произвольный размер - с одинаковой высотой.

Правильно ли я вас понял - вы предлагаете в flex-box добавить еще один блок для изображений в указанием их размеров?

@ivanov_333 · 12.11.2023, 20:18

Я с вордпресс не работаю! Пишу только на чистий HTML и CSS. Не знаю на каком принципе работает этот настройщик вордпресса!
Если примерно он масштабирует изображение, чтобы поместит его в контейнер с определеного размера - то в чем тогда проблема?
А если все выглядит как на приложеное фото - то там изображения имеють разные размеры - значить настройщик вордпресса ничего не настраиват!
Или ты сам надо установишь нужные настройки?

ОК. Я напишу, что я был сделал в такая ситуация. Имеет два варианта:

1. Предварительно масштабируем каждое изображение, чтобы сделать их одинаковой высоты, одинаковой ширины или того и другого - что-то нам нужно! (Примерно это можно сделать с бесплатная программа Irfan View.)
И потом располагаем уже масштабированные изображения в flex контейнера. Можно пользовать и свойство gap, либо column-gap, чтобы задать равные отступы между изображения, либо justify-content: space-between; - как при в твой пример.

2. Укажем в flex контейнера одинаковые размеры изображения. Но здесь имеет много подводных камней! Потому, что если указанный размер изображния не соответствуеть на соотношение его оригинальные размеры - получиться искажение изображения. Вот посмотри примерно как выглядит это при такой код(фото1):

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.my-flex-cont1 {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
}
 
.my-flex-box { 
    margin: 5px;
    padding: 5px;
    width: 18%; 
}
 
img {
    width: 100%;
    height: 300px;  
}

Чтобы изобразим наши изображения корректно, можно включим свойство object-fit с значение contain - при которое изображение сохраняет свои пропорции. И так получим изображения с одинаковая ширина(фото2), добавляем такая строка в коде:

CSS
1
2
3
4
5
img {
    width: 100%;
    height: 300px;
    object-fit: contain;
}

Надеюсь, что уже это поможеть для решение проблема!
А если нет - пишите, что другое надо!

п.с. Вариант добавить еще один блок для изображений в указанием их размеров - в принципе тоже возможен, но по моему пока не нужен!

Новые блоги и статьи Все статьи Все блоги /
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .

@bamsik-bamsik 10 / 8 / 2 Регистрация: 07.05.2020 Сообщений: 514
	12.11.2023, 16:07 [ТС]
	Спасибо за ответ. Насчет изображений. Этот флекс контейнер уставнавливается на странице сайта вордпресс. Изначально все картинки имеют разный размер. Чтобы они смотрелись ровно настройщиком самого вордпресса устанавливается произвольный размер - с одинаковой высотой. Правильно ли я вас понял - вы предлагаете в flex-box добавить еще один блок для изображений в указанием их размеров? 0