Как сделать так, чтобы столбец гибкого поля оставался на высоте 100% независимо от ширины изображений внутри? ⇐ CSS

[Anonymous]

Я новичок в HTML CSS.
Я пытаюсь создать базовую страницу HTML CSS, содержащую три столбца div. 2 из них шириной 40% каждый и один из них предназначен только для кнопок или текста, то есть 15-20%. Общая высота всего не должна превышать 100vh (т. е. без прокрутки). Примерный макет на изображении. Ссылка на изображение
В первом столбце будет находиться одно изображение с различным соотношением сторон. Изображение необходимо прикрепить слева от первого столбца с регулируемой высотой. (Кроме того, я знаю, что все будет в порядке, если у меня будет вертикальное изображение, но я не знаю, что делать, если я получу горизонтальное изображение, поэтому любая помощь с этим также будет полезна)
Второй столбец будет содержать два изображения в виде столбца с границей/полем/отступом между собой (т. е. между изображениями второго столбца нет границы). Они должны иметь одинаковую ширину при отображении, а высота должна составлять только 100% размера страницы. И вот в чем проблема: либо изображения принимают разные размеры и отображаются странно, либо они не соответствуют пропорциям (т. е. растянуты или перекошены), либо, если я пытаюсь добиться того и другого, они просто заполняют всю ширину 40% и выходят за пределы страницы по вертикали. Как изменить размер элемента div, гибкого поля или тегов img, чтобы сохранить пропорции и отзывчивость?
Вот HTML-код,

Код: Выделить всё

Test Move Object


[*]






[img]../frontend/testimg.jpg[/img]



[img]../frontend/croppedtemp.jpg[/img]
[img]../frontend/cropped.jpg[/img]



Speed Placer
Test Placer

Вот CSS,

Код: Выделить всё

body, html {
overflow: hidden;
max-height: 100vh;
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
bottom: 0;
margin: 0;
}

.container1 {
height: 100%;
display: flex;
justify-content: space-between;
}

.container1 div {

padding: 10px;

}

.container2 {
display: flex;
justify-content:flex-start;

}

.container3 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
object-fit: cover;
width: fit-content;
height: 100%;
}

.container3 div {
height: fit-content;
/* width: 100%;  */
padding: 0;
object-fit: contain;
}

.container3 div img {
/* height: 50%; */
width: 100%;

}

img {
/* position: relative; */
height: 100%;

}

#image1 {
height: 1px;
position: absolute;
width: inherit;
top: 5px;
left: 5px;

}

h3 {
width: 20vw;
}

Если я изменю div изображения второго столбца и img css, т.е.

Код: Выделить всё

.container3 div {
height: 50%;
padding: 0;
object-fit: cover;
}

.container3 div img {
width: fit-content;
}

тогда он помещает изображения по высоте 100%, но

• получит разную ширину и,
  отступы в нижней части нижнего изображения исчезли.

Я думаю, что если я смогу вместить Гибкий блок 2-го столбца до высоты 100%, это может сработать, но, будучи частью другого гибкого блока, он регулирует свою ширину, и, следовательно, высота становится больше, чем нам нужно.
Кроме того, я не уверен, стоит ли помещать такое количество гибкие коробки были вообще ошибкой.
Мне пришлось обойти эту проблему, отправив оба изображения на сервер, соединив их вместе и показав здесь одно изображение, но мне нужно, чтобы это было быстрее, а серверная часть будет замедлять работу.

Подробнее здесь: https://stackoverflow.com/questions/783 ... e-width-of