My challenge is to create a centered div on the page that resizes with the viewport while maintaining an aspect ratio of 16:9. However, I also need the font and content inside the div to scale proportionally as it resizes. Using vmin works well in most cases, but it would be perfect if the aspect ratio was 1:1 instead. Unfortunately, vmin checks for the lesser value between height and width of the viewport directly, and custom aspect ratios are not supported.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:white;
}
.wrapper {
width: 95vw;
height: calc(95vw * 9/16);
max-height: 95vh;
max-width: calc(95vh * 16/9);
background: center;
background-color: blue;
background-size:contain;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#lorem {
color: aqua;
font-size:10vmin;
text-align:center;
position:absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
margin:auto;
}
</style>
</head>
<body>
<div class="wrapper">
<p id="lorem">
This text should scale with div only.
</p>
</div>
</body>
</html>
https://jsfiddle.net/Addictorator/70fq44sv/2/
If you resize the window vertically, you'll see the issue I'm trying to solve.
I'm exploring options to achieve this effect using pure CSS, although I suspect JavaScript might be necessary. One approach could involve scaling each element separately based on the ratio of the original or previous div size compared to the current size. Alternatively, a JavaScript solution could replicate vmin behavior but factor in the 16:9 aspect ratio instead of 1:1. Ideally, I'd prefer a pure JS solution without jQuery. While I've attempted to tackle this myself, my JavaScript skills are quite basic.
Thank you for any help or suggestions you can provide!