[*] Слева и правое колум 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
