До вашего сообщения нашел свое решение.
Для тега html шрифт указываю не в vmin, а в vh.
Написал медиазапрос max-width: calc(100vh * 1.1). И при удовлетворении этого медиазапроса указываю размер шрифта уже в vw (font-size: 1vw), и в медиазапросе переписываю размеры в соответствии с шириной экрана.
Ankhena, в моем случае ничего в svg запихать нельзя, тут интерактивное колесо, которое при нажатии кнопки крутится. И почитал про aspect-ratio, не могу понять, как оно мне поможет, да не очень хорошо поддерживается браузерами.
Ankhena, возможно вы неправильно поняли мой вопрос. Использовать медиазапрос я не могу, потому что заранее ширина блока .main неизвестна, т.к. при разной высоте экрана ширина будет разная. И JS тоже не подходит. Чтобы было понятней, нужен эффект, который дает свойство background-size: contain, если бы весь контент в блоке .main был фоновой картинкой.
Ankhena, вы написали свойства object-fit и background-size, которые относятся только к фонам и картинкам. Но это к данной странице не имеет никакого отношения. Заголовки и тексты могут быть сверстаны не картинками, а текстами.
Сергей delphinpro, я так понял, что при использовании 1vmin по ширине контент начинает уменьшаться, если ширина меньше высоты. А есть решение, чтобы по ширине начинало уменьшаться в том случае, если контент уперся в края экрана? Вот пример страницы, у которой ширина больше высоты.
Для тега
htmlшрифт указываю не в vmin, а в vh.Написал медиазапрос max-width: calc(100vh * 1.1). И при удовлетворении этого медиазапроса указываю размер шрифта уже в vw (font-size: 1vw), и в медиазапросе переписываю размеры в соответствии с шириной экрана.