요즘 점점 더 많은 사람들이 휴대폰을 사용하여 웹을 검색하므로 웹사이트의 반응성이 점점 더 중요해지고 있습니다. 모바일에서 사이트를 테스트하는 동안 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 요소의
<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 튜토리얼