<div id="object" />
</div>
<h2 id="aspectRatio">Aspect Ratio: 16 / 9</h2>
<p id="dimensions"></p>
*,
*:before,
*:after {
box-sizing: border-box;
}
:root {
--ratio-w: 16;
--ratio-h: 9;
--w: 80;
--aspect-ratio: calc(var(--ratio-w) / var(--ratio-h));
}
h2,
p {
text-align: center;
}
#object {
display: block;
width: calc(var(--w) * 1vmin);
margin: 0 auto;
aspect-ratio: var(--aspect-ratio);
object-fit: cover;
background: linear-gradient(#e66465, #9198e5);
border: grey 1px solid;
font-weight: bold;
}
@supports not (aspect-ratio: 16 / 9) {
#object {
position: relative;
width: 8rem;
height: 6rem;
}
#object::after {
position: absolute;
content: "aspect-ratio not supported in this browser";
}
}
import dat from "https://cdn.skypack.dev/dat.gui";
let aspectRatio = document.getElementById("aspectRatio");
const gui = new dat.GUI({});
const config = {
w: 16,
h: 9
};
gui
.add(config, "w")
.min(1)
.max(50)
.step(1)
.name("Ratio Width")
.onChange(() => {
updateText();
});
gui
.add(config, "h")
.min(1)
.max(50)
.step(1)
.name("Ratio Height")
.onChange(() => {
updateText();
});
updateText();
window.addEventListener("resize", () => {
updateText();
});
function updateText() {
let root = document.documentElement;
root.style.setProperty("--ratio-w", config.w);
root.style.setProperty("--ratio-h", config.h);
aspectRatio.innerText = `Aspect Ratio: ${config.w} / ${config.h}`;
let dim = document.getElementById("dimensions");
let obj = document.getElementById("object");
dim.innerText = `Width: ${obj.offsetWidth}px, Height: ${obj.offsetHeight}px`;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.