Ячейка с изображением в сетке CSS занимает слишком много места ⇐ Html

[Anonymous]

Я пытаюсь создать макет 3 столбца, где: < /p>


[*] Слева и правое колум br /> Левый колум пуст < /li>
Правый столбец содержит заголовок изображения (текст произвольной длины) < /li>
Средний столбец содержит изображение Полем Изображение должно иметь высоту 100% (заполнить порт Viewport по вертикали).
Сдвиг макетов не происходит, когда изображение загружается (я включил ширину и height атрибуты на Изображение). Я не включил это в демо. >

body, figure {
padding: 0;
margin: 0;
}

figure {
max-width: 100vw;
max-height: 100vh;
display: grid;
grid-template-columns: 1fr min-content 1fr;
grid-template-rows: 1fr;
grid-gap: 1rem;

border: 2px solid red;
}

figure::before {
content: 'abc';
}

img {
height: 100%;
width: auto;
}< /code>


This is a cat
< /code>
< /div>
< /div>
< /p>

Вот как это выглядит (экрановый скриншот показывает сетки. Из Firefox Dev Tools):

< /p>

Проблема в этом пространстве, которое я нарисовал красной ручкой. Это делает ячейку сетки с изображением слишком широким. Я хочу, чтобы это выглядело так:

< /p>

Здесь ячейка сетки только настолько широко, насколько это необходимо, чтобы соответствовать изображению (сохранение соотношения сторон). В результате изображение центрировано горизонтально. < /P>

Как мне это сделать? < /P>

Подробнее здесь: https://stackoverflow.com/questions/623 ... much-space