<div class="container">
<div class="vote">Some text</div>
</div>
html, body, .container {
margin: 0;
padding: 0;
height: 100%;
}
.container {
overflow: hidden;
overflow: clip;
}
.vote {
transform-origin: 0 0;
text-align: center;
font-size: 100px;
height: 1000px;
width: 300px;
background: linear-gradient(45deg, #f00, #0f0);
}
function resize() {
const container = document.querySelector('.container');
const vote = document.querySelector('.vote');
vote.style.transform = `scale(${container.offsetHeight/vote.offsetHeight})`;
}
resize();
addEventListener('resize', resize);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.