Поскольку @ web-tiki уже показывает способ использования vh
/ vw
, мне также нужен способ центрировать на экране, вот код фрагмента для портрета 9:16.
.container {
width: 100vw;
height: calc(100vw * 16 / 9);
transform: translateY(calc((100vw * 16 / 9 - 100vh) / -2));
}
translateY
будет удерживать этот центр на экране. calc(100vw * 16 / 9)
ожидается высота для 9/16. (100vw * 16 / 9 - 100vh)
- высота переполнения, поэтому pull up overflow height/2
будет удерживать ее на экране.
Для пейзажа и сохранения 16: 9 вы показываете use
.container {
width: 100vw;
height: calc(100vw * 9 / 16);
transform: translateY(calc((100vw * 9 / 16 - 100vh) / -2));
}
Коэффициент 9/16 является легкостью для изменения, нет необходимости предопределять 100:56.25
или 100:75
. Если вы хотите сначала обеспечить высоту, вы должны переключить ширину и высоту, например height:100vh;width: calc(100vh * 9 / 16)
для изображения 9:16.
Если вы хотите адаптироваться для разных размеров экрана, вы также можете заинтересовать
@media (orientation: portrait)
/ @media (orientation: landscape)
Запрос мультимедиа для portrait
/ landscape
на измените соотношение.