The aspect-ratio CSS property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.
object.style.aspectRatio = "value";
<'aspect-ratio'> = auto || <ratio>
auto
Automatically specified by the user agent.
<ratio> = <number [0,∞]> [ / <number [0,∞]> ]?
<number [0,∞]>
An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a positive sign (+). The last character may be succeeded by an exponent (e or E) and an integer.
<!doctype html>
<html>
<head>
<style>
img
{
aspect-ratio: 16 / 9;
}
</style>
</head>
<body>
<img alt="Happy" src="/assets/svg/Happy.svg">
</body>
</html>
<!doctype html>
<html>
<body>
<button onmouseover="myfunction(innerHTML)">initial</button>
<button onmouseover="myfunction(innerHTML)">auto</button>
<button onmouseover="myfunction(value)" value="16 / 9">ratio</button>
<img alt="Happy" src="/assets/svg/Happy.svg">
<script>
function myfunction(myparameter)
{
document.querySelector("img").style.aspectRatio = myparameter;
}
</script>
</body>
</html>
<!doctype html>
<html>
<body>
<button>initial</button>
<button>auto</button>
<button value="16 / 9">ratio</button>
<img alt="Happy" src="/assets/svg/Happy.svg">
<script>
function myfunction(myparameter)
{
document.querySelector("img").style.aspectRatio = myparameter;
}
const myelements = document.querySelectorAll("button");
for(let myelement of myelements)
{
let myargument = myelement.innerHTML;
if(myelement.value)
{
myargument = myelement.value;
}
myelement.addEventListener("mouseover", function(){myfunction(myargument)});
}
</script>
</body>
</html>