Как сделать так, чтобы изображение реагировало постепенно/плавно (сначала уменьшите ширину, затем высоту) ⇐ CSS

[Anonymous]

У меня есть изображение, которое я хочу, чтобы оно было хорошо видно в адаптивном режиме, но, к сожалению, из-за его большой ширины его высота на телефоне слишком мала!
Есть способ что мы можем установить среднюю высоту, чтобы высота не уменьшалась слишком сильно, НО это не точный метод:

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

object-fit: cover;
min-height: 250px;

Итак, мне в голову пришла идея установить диапазон ширины. и сначала уменьшите ширину, затем высоту.
Возможно ли это?:
всякий раз, когда браузер уменьшал масштаб и хотел уменьшить высоту изображения, следует сначала уменьшить ширину изображения (обложка – масштабирование). постепенно/плавно до указанного диапазона (10% справа и слева). Затем уменьшите высоту, сохраняя уменьшенные размеры.
мой код:

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

.ihero img {
width: 100%;
}

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

[url=https://example.com/]
[img]https://i.sstatic.net/fzY3Uxj6.jpg[/img]
[/url]

Подробнее здесь: https://stackoverflow.com/questions/784 ... st-then-he