I have a container that contains two SVG images. I want both the container and the images to adjust their height based on a percentage of the viewport size, while staying within a specified min-height/max-height range (and maintaining the aspect ratio of the images).
I've searched for solutions but haven't found one that completely meets my needs. I'm not even sure if it's achievable, and if not, what would be a reasonable alternative.
(I am using django and bootstrap4, in case that matters.)
* { 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>The code above is far from functional, but I want to determine if it's worth pursuing further. :)