30 lines
1.1 KiB
HTML
30 lines
1.1 KiB
HTML
<!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> |