w3.css

반응형 Iframe

CSS를 사용하여 반응형 iframe을 만드는 방법을 알아보자.

종횡비

1단계) HTML 추가

<div class="container">
  <div class="text">Some text</div> <!-- If you want text inside the container -->
</div>

16:9 화면 비율

컨테이너 DIV의 가로 세로 비율을 유지하기 위해 padding-top에 백분율 값을 추가한다. 다음 예제는 YouTube 동영상의 기본 화면 비율인 16:9의 화면 비율을 생성한다.

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

4:3 화면 비율

.container {
  padding-top: 75%; /* 4:3 Aspect Ratio */
}

3:2 화면 비율

.container {
  padding-top: 66.66%; /* 3:2 Aspect Ratio */
}

8:5 화면 비율

.container {
  padding-top: 62.5%; /* 8:5 Aspect Ratio */
}

1:1 화면 비율

.container {
  padding-top: 100%; /* 1:1 Aspect Ratio */
}

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기