html, body {
margin: 0;
padding: 0;
}
(min-device-aspect-ratio: 16/9) and (min-device-aspect-ratio: 16/10) and (min-device-aspect-ratio: 21/9)
(min-width: 400px) and (min-width: 300px) and (min-width: 600px)
<meta name="viewport" content="width=ШИРИНА">
height: auto
object-fit: cover
Чтобы было, как будто картинка загружена.
так это по сценарию номер 2, т.е. флексами
остальное не так