종횡비를 유지하고 화면에 맞는 유체 블록 CSS

반응형

DIV 블록을 화면에 맞추고 가로 세로 비율을 유지하고 싶은 경우가 있었나요? 여기 제가 만든 예가 있습니다. 빨간색 블록은 가로 세로 비율을 유지하며 화면에 맞습니다.

GIF

코드는 이렇습니다.

<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;
}