HTML/CSS — адаптация размера изображения сетки к другому элементу сетки в той же строке ⇐ Html

[Anonymous]

У меня возникла проблема с веб-страницей, на которой используется сетка из двух столбцов. Строки имеют разную высоту, и в одной конкретной строке в левом столбце находится изображение, а в правом — текст. Я бы хотел, чтобы изображение динамически соответствовало размеру текста, поэтому оно менялось в зависимости от размера экрана. Если я не устанавливаю фиксированную высоту в сетке изображения (или для изображения), сетка расширяется до высоты изображения (выше, чем текстовая сетка для большинства экранов), но если я делаю устанавливаю фиксированную высоту, изображение, конечно, не расширяется, когда текстовая сетка становится выше этого предела. Вероятно, есть простое решение, но я, ради себя, не могу найти его в данный момент.
Сейчас код выглядит так:

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

/* foo */

.container {
display: grid;
grid-template-columns: 50% 50%;
grid-template-areas:
"Header Header"
"Row1 Row1"
"Row2-L Row2-R"
"Row3-L Row3-R"
"footer footer";

background-color: rgba( 255, 0, 0, 0.2 );
}

.container div.Row3-L {
grid-area: Row3-L;

background-color: rgba( 0, 255, 0, 0.2 );
}

.container div.Row3-R {
grid-area: Row3-R;

background-color: rgba( 0, 0, 255, 0.2 );
}

/* --- Only applicable to smaller devices --- */
@media only screen and (max-width: 799px) {
.txt {
margin-left: 10%;
width: 66.7%;
padding-top: 5vh;
padding-bottom: 10vh;
}
}

/* --- Only applicable to larger devices --- */
@media only screen and (min-width: 799px) {
.txt {
margin-left: 20%;
width: 40%;
padding-top: 10vh;
padding-bottom: 20vh;
}
}

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

[img]https://placehold.co/200x200[/img]




Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce egestas nisl neque, a eleifend diam dictum vitae. Vivamus mollis lobortis porta. Nunc est mauris, placerat eget placerat ac, mattis ut tortor.

(Я пробовал добавить отдельный для изображения, но, похоже, это ничего не меняет)
Для .img я пробовал подгонку объекта, переполнение и различные минимальные и максимальные высоты. Полагаю, я хотел бы найти что-то вроде установки автоматических строк только для одной ячейки, но это, похоже, не работает.
Есть ли способ, чтобы высота строки соответствовала высоте определенного элемента сетки? Или какое-то другое решение, которое я полностью упускаю из виду?
Большое спасибо!

Подробнее здесь: https://stackoverflow.com/questions/798 ... n-same-row