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

[Anonymous]

Мы хотели бы использовать TailwindCSS для пропорционального масштабирования изображения (т. е. без изменения соотношения сторон), чтобы изображение было полностью видимым «над сгибом», центрировано по горизонтали и вертикали и имело настраиваемое количество отступов между изображением. и по бокам окна.
Например, у нас есть код, который выглядит следующим образом (Playground Tailwind):

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

[img]https://via.placeholder.com/1500x2500[/img]

Здесь изображение нужно изменить размер так, чтобы его высота не превышала доступный экран. Кроме того, между изображением и краями экрана должны быть отступы. (Точку останова sm можно игнорировать; это более важно для больших экранов.)
В идеале это будет достигнуто с использованием только CSS (в частности, Tailwind), однако при необходимости используется JavaScript. вариант.

Подробнее здесь: https://stackoverflow.com/questions/739 ... fit-within