A fluid block CSS which keeps aspect ratio and fits screen

#css

Have you ever had a case you want to fit a DIV block to the screen and keep the aspect ratio? Here's an example that I created. The red block keeps the aspect ratio and fits the screen.

The code is like this. In the example I used 16:9 as the aspect ratio but you can change as you want. Please change 16 and 9 for your purpose :)

<div class="container">
  <div class="block"></div>
</div>

/* quick sanitizer */
* {
  margin: 0;
  padding: 0;
}

.block {
  background-color: red;
  height: 100vh;
  max-width: calc(100vh * 16 / 9);
  max-height: calc(100vw * 9 / 16);
  margin: 0 auto;
  position: relative;
  width: 100vw;
}

.container {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  position: relative;
}

Top comments (0)

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.