CSS를 사용하여 iframe에서 적응형 높이 효과를 구현하는 방법

요즘 점점 더 많은 사람들이 휴대폰을 사용하여 웹을 검색하므로 웹사이트의 반응성이 점점 더 중요해지고 있습니다. 모바일에서 사이트를 테스트하는 동안 iframe이 적응형 높이를 가질 수 있도록 하는 훌륭한 CSS 트릭을 발견할 때까지 내 비디오가 예상한 대로 작동하지 않는 이유를 알아내려고 많은 노력을 기울였습니다. 다음으로, 관심 있는 친구들이 참고할 수 있도록 iframe의 사용자 정의 높이를 동적으로 구현하는 방법을 공유하겠습니다.

iframe 적응형 높이

이 기사에서는 데모 목적으로 iframe에 포함된 비디오를 사용합니다. 먼저 동영상 URL을 방문하여 동영상 아래의 '공유'를 클릭한 후 '삽입'을 클릭하세요. 구체적인 코드는 다음과 같습니다.

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>

다음으로 너비 = "560" 높이 = "315"를 삭제해야 합니다. iframe의 크기는 여기에서 설정됩니다. 치수를 직접 설정해야 하므로 이 작업을 수행할 필요가 없습니다.

CSS

를 사용한 후 iframe을 다른 html 요소의

안에 넣어야 합니다. 이 요소는 iframe 크기를 조정하므로 이는 매우 중요합니다. 그런 다음 아래와 같이 래핑된 요소에 CSS 클래스를 추가하고 iframe에 클래스를 추가합니다.

<div class="resp-container">
    <iframe class="resp-iframe" src="https://www.youtube.com/embed/dQw4w9WgXcQ" gesture="media"  allow="encrypted-media" allowfullscreen></iframe>
</div>

다음 스타일을 사용하여 래퍼 클래스를 정의합니다.

.resp-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

위치: 상대 여기서는 iframe의 위치가 매우 중요합니다. 위치: 나중에 iframe을 래핑 요소와 연결할 수 있도록 상대적입니다. 이는 CSS에서 position:absolute가 가장 가까운 비정적 상위 요소를 기반으로 요소의 위치를 ​​지정하기 때문입니다.

overflow: Hidden 컨테이너 외부에 배치될 수 있는 요소를 숨길지 여부입니다.

padding-top: 56.25% 이것이 핵심입니다. CSS에서는 padding-top 속성을 백분율로 설정하여 iframe을 올바른 비율로 유지할 수 있습니다. 백분율을 사용하면 요소의 너비를 기준으로 사용할 패딩을 계산합니다. 이 예에서는 56.26%의 비율을 유지하려고 하며 다른 비율도 사용할 수 있습니다.

다음과 같이 iframe 클래스를 정의합니다.

.resp-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

position: 절대; 이렇게 하면 iframe에 래퍼를 기준으로 한 위치가 제공되고 래퍼의 패딩에 배치됩니다.

top: 0 및 left: 0은 iframe을 컨테이너 중앙에 배치하는 데 사용됩니다.

너비: 100% 및 높이: 100%는 IFRAME이 감싸진 공간을 모두 차지하도록 합니다.

완료되면 반응형 iframe이 표시됩니다.

요약: 이 기사에서는 iframe을 높이에 맞게 조정할 수 있는 기술을 살펴보았습니다. 보시다시피 실제로는 매우 간단하며 이 기사를 통해 시간을 절약할 수 있기를 바랍니다.

【관련 추천 튜토리얼】

1, CSS 튜토리얼

2,