<!DOCTYPE HTML>
<style>
img         { margin-top: 10px;}
</style>

<div style="width:500px; height:500px">
    <img id="image-vw" src="./resources/colorsquare.png">
    <img id="image-vh"  src="./resources/colorsquare.png">
    <img id="image-vmin" src="./resources/colorsquare.png">
</div>
<script>
function applyStyle() {
    var viewportWidth = window.innerWidth;
    var viewportHeight = window.innerHeight;
    var viewportMinLength = Math.min(viewportWidth, viewportHeight);

    var elementStyle = document.getElementById("image-vw").style;
    elementStyle.width = Math.floor(2 * viewportWidth / 100) + "px";
    elementStyle.height = Math.floor(3 * viewportWidth / 100) + "px";

    elementStyle = document.getElementById("image-vh").style;
    elementStyle.width = Math.floor(3 * viewportHeight / 100) + "px";
    elementStyle.height = Math.floor(4 * viewportHeight / 100) + "px";

    elementStyle = document.getElementById("image-vmin").style;
    elementStyle.width = Math.floor(4 * viewportMinLength / 100) + "px";
    elementStyle.height = Math.floor(5 * viewportMinLength / 100) + "px";
}
applyStyle();
</script>