Сохранять пропорции видео при изменении размера браузера - PullRequest
Новая
       53

Сохранять пропорции видео при изменении размера браузера

3 голосов
/ 29 января 2020

Я работаю над инструментом редактирования видео, и мне нужно поддерживать соотношение сторон 16:9 видео при изменении размера экрана по горизонтали и вертикали. До сих пор я работал так, как ожидалось, при изменении размера по горизонтали и при изменении размера по вертикали, но не могу заставить его работать при изменении размера по вертикали . Код Javascript, который я использовал для вычисления высоты видео и изменения его размера, приведен ниже (обратите внимание, что предложение else пусто, потому что именно здесь код должен go): 

const calculateHeight = () => {
    // Get the other elements on the page
    const header = document.querySelector('.main-navigation');
    const meshTopBar = document.querySelector('.mesh__top-bar');
    const footer = document.querySelector('.mesh__bottom-bar');
    // Get the section to apply the window height to it
    const mainSection = document.querySelector('.insert-level-container');
    // Get the video elements
    const editor = document.querySelector('.mesh__insert-editor-container');
    const video = document.querySelector('.mesh__insert-editor-video-container');

    // Apply the height to the main section by calculating the window height minus the other elements' height
    if(mainSection !== null) {
      mainSection.style.height = (window.innerHeight - header.offsetHeight - meshTopBar.offsetHeight - footer.offsetHeight) + 'px';
    }

    // This should be the ideal height for the video
    video.style.minHeight = ((video.offsetWidth * 9) / 16) + 'px';

    // If the video height is bigger than the section height (calculated above), then resize it
    if(video.offsetHeight + 115 > mainSection.offsetHeight) {
      video.style.minHeight = video.offsetHeight - 1 + 'px';
      editor.style.maxWidth = video.offsetHeight * 16 / 9 + 'px';
    } else {
      // This is where the logic for the vertical resizing should go
    }
  }

релевантный CSS для этих элементов: 

.mesh__insert-editor-container {
    margin-left: auto;
    margin-right: auto;
}

.mesh__insert-editor-video-container {
    position: relative;
    width: 100%:
}

И HTML: 

<section class="mesh__insert-editor-container flex__one flex-container flex-column horizontally-left-aligned" id="video-main-container">
    <div class="mesh__insert-editor-video-container flex-container horizontally-right-aligned flex-wrap">
        <video class="mesh__insert-editor-video-placeholder"></video>
    </div>
</section>

Весь этот код:

  • Получите высоту из всех элементов на странице, суммируйте их и вычислите высоту основного раздела, вычитая эту высоту;
  • Если высота видео становится больше, чем высота раздела, я уменьшаю его высоту на -1px каждый раз, когда окно изменяется размер и вычисляется новая ширина.

Весь приведенный выше код дает мне этот результат , который прекрасно работает для большинства сценариев ios, но мне нужно видео для увеличиваться, если условие оператора if не выполнено. Все, что я пробовал в операторе else, становится "нервным".

Любая лучшая альтернатива для решения этой проблемы будет высоко оценена. Спасибо всем!

Ответы [ 2 ]

0 голосов
/ 30 января 2020

Работай! Я использовал это удивительное CSS -только решение: https://codepen.io/EightArmsHQ/pen/BvNzrm аналогично предложению BugsArePeopleToo, от восьмиarmshq: 

.content{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;

  background: #555;
  box-shadow: inset 1vh 1vh 10vh 0 rgba(0,0,0,0.5);
  display: flex;


  box-sizing: border-box;
  border: 25px solid #cecece;
}
0 голосов
/ 29 января 2020

Трюк с соотношением сторон CSS может быть хорошим решением: https://css-tricks.com/aspect-ratio-boxes/

Подход использует преимущество в CSS, где padding на основе процента значение будет относительно ширины элемента. Создайте контейнер, используя этот трюк. Важным битом является эта строка: 

padding-top: calc(9/16 * 100%);

Значение рассчитывает правильную высоту на основе требуемого соотношения сторон (в данном случае 9 в высоту по 16 в ширину) и генерирует его Относительно ширины элемента путем умножения на 100%.

С сохранением пропорций контейнера, просто поместите содержимое в абсолютно позиционированный внутренний div, и все будет хорошо. Это решение полностью реагирует на это. 

* { box-sizing: border-box }

.outer-max-width {
  max-width: 960px;
  margin: 0 auto;
}

.aspect-ratio-box {
  width: 100%;
  padding-top: calc(9/16 * 100%);
  position: relative;
  border: 2px solid red; /* for demo visibility, remove */
}

.aspect-ratio-box-content {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  border: 2px solid blue; /* for demo visibility, remove */
}

.video-placeholder {
  display: block;
  width: 100%;
  height: auto;
}
<div class="outer-max-width">
  <div class="aspect-ratio-box">
    <div class="aspect-ratio-box-content">
      <img class="video-placeholder" src="https://placeimg.com/640/360/nature" />
    </div>
  </div>
</div>
...