Question

我有一个装有两个SVG图像的容器。我希望容器和图像的高度由视口的百分比（理想情况下是动态地）在预定的最小高度/最大高度（并保留图像的长宽比）内确定。

到目前为止，我发现的唯一答案并不完全符合我的要求，而且我甚至不确定是否有可能，如果没有，那么合理的后备水平将是什么。

（如果有区别，我正在使用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，并拖动浏览器的宽度以查看导航栏动态缩小和增长。

尝试根据窗口大小缩放SVG图像（理想情况下动态缩放）

1 个答案: