반응형
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;
}
'css' 카테고리의 다른 글
후풍 CSS 각도 (0) | 2022.02.23 |
---|---|
하이 드론 (0) | 2022.02.23 |
CSS의 형제 조합자 (0) | 2022.02.23 |
SVG를 사용한 대화형 지글리퍼프 (0) | 2022.02.23 |
보아스 프라티카스 엠 클래스네임 no CSS (0) | 2022.02.22 |
댓글