I have to characterize the present viewport form in miniature, becoming a containing component. I need to supply a preview of how an HTML construction will match into the display screen as it’s at that second.
To do that, I imagine I want to find out the side ratio of the display screen. After all this may be completed with JavaScript, however it will be extra elegant in my case to do it with CSS.
It would look one thing like this. Right here I am utilizing the zero top trick with backside padding offering the side ratio. It would not work as a result of the calc()
operate cannot divide by a worth with models.
.container {
width: 240px;
top: 160px;
background: #ddd;
}
.vieweport-miniature {
top: 0;
padding-bottom: calc(100vw / 100vh); /* cannot divide by viewport models */
max-width: 100%;
max-height: 100%;
background: pink;
}
<div class="container">
<div class="vieweport-miniature"></div>
</div>
There are a lot of questions on SO asking one thing comparable, however they have a tendency to have a predefined side ratio. Right here I would like it to match that of the viewport dynamically.
Thanks!