Я занимаюсь разработкой информационной доски для моего университетского клуба. Я почти завершил его, за исключением того, что у меня осталась одна досадная ошибка: центральное изображение расширяется под окном просмотра.
Предполагается, что изображение сжимается и расширяется, чтобы оставаться между двумя боковыми столбцами, что и происходит из-за атрибута width
css в процентах. Тем не менее, я бы хотел, чтобы он не расширялся дальше, когда нижняя часть изображения соприкасается с нижней частью области просмотра; он просто должен оставаться по центру.
Для моей жизни я не могу найти решение, которое остановит его рост за пределы нижней части страницы без искажения соотношения сторон изображения.
Я думал, что что-то с object-fit: contain
, но, увы, кажется, ширина всегда будет иметь приоритет над object-fit
.
Любая помощь будет высоко ценится, так как я довольно new to web dev.
Вот ссылка на клиентское представление того, что у меня есть: https://jsfiddle.net/ydumcrnk/