| <!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> |
