xmoonlight

...и какие технологии лучше использовать?

cover
Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.

contain
Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

@media all and (orientation: portrait) {
	html,body {
                transform: rotate(-90deg);
                transform-origin: left top;
                width: 100vh;
	}
}

а как буд-то подгружается
То-есть какая-то задержка есть
Как это исправить? Бесит ужасно

@media (pointer:coarse) {
    /* Primary Input is a coarse pointer device such as touchscreen or XBox Kinect etc */
}
 
@media (pointer:fine) {
    /* Primary Input is a fine pointer device such as a mouse or stylus */
}
 
@media (hover:none) {
    /* Primary Input doesn't respond to hover at all, even partially (ie: there is no pointing device) */
}
 
@media (hover:on-demand) {
    /* Primary Input responds to hover only via emulation, such as touch screen devices */
}
 
@media (hover:hover) {
    /* Primary Input responds to hover fully, such as a mouse or a Nintendo Wii controller */
}