Почему не может SGML:: Синтаксический анализатор:: OpenSP находят символ __ ZTI15SGMLApplication?

Поскольку @ 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.

Если вы хотите адаптироваться для разных размеров экрана, вы также можете заинтересовать

• background-size обложка / содержать Над стилем похож на содержащий, зависит от ширины: отношение высоты.
• object-fit обложка / содержит для тега img / video
• @media (orientation: portrait) / @media (orientation: landscape) Запрос мультимедиа для portrait / landscape на измените соотношение.