Попытка масштабировать изображения SVG (в идеале динамически) в зависимости от размера окна

Question

У меня есть контейнер с двумя SVG-изображениями.Мне бы хотелось, чтобы контейнер и изображения имели свою высоту, определяемую в процентах от области просмотра (в идеале динамически), в пределах предварительно определенной min-height / max-height (и сохраняя соотношение сторон изображений).

Единственные ответы, которые я нашел до сих пор, не совсем соответствовали моим требованиям, и я даже не уверен, прочитав, если это возможно, а если нет, то каким будет разумный запасной вариант.

(я использую django и bootstrap4, если это имеет значение.)

 * { margin: 0px; }
 html, body { height:100%; }
 html { overflow:hidden; }

 #nav-mobile {
   min-height: 24px;
   max-height: 100px;
   height: 20%;
   width: auto !important; 
  }

 .mobile-logo {
    height:100%;
    min-height: 24px;
    max-height: 100px;
    width: auto !important;
 }

<nav class="navbar" id="nav-mobile" class="res">
<span class="navbar-item text-left">
    <img src="{% static 'img/one.svg' %}" class="mobile-logo" id="mobile-logo-one" />
</span>
<span class="navbar-item text-right">
    <a href="#">
        <img src="{% static 'img/two.svg' %}" class="mobile-logo" id="mobile-logo-two" />
    </a>
</span>
</nav>

Я знаю, что приведенный выше код находится в нескольких милях от работы, но я хотел бы знать, просто бьюсь головой о кирпичную стену.:)

Answer 1

Вы можете использовать значения 100vh;представлять высоту окна браузера и 100vw;представлять ширину.Это динамично и используется для многих вещей.Если вы хотите посмотреть живую демоверсию, зайдите на мой веб-сайт https://gam3t.in и перетащите его по ширине браузера, чтобы увидеть, как панель навигации динамически уменьшается и увеличивается.