웹에서 iframe 적응형을 설정하는 방법

이번에는 WEB에서 iframe Adaptive를 설정하는 방법과 WEB에서 iframe Adaptive를 설정할 때 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

문제
반응형 레이아웃에서는 iframe 요소에 주의해야 합니다. iframe 요소의 너비 및 높이 속성은 너비와 높이를 설정하지만 포함 블록의 너비 또는 높이가 iframe 요소의 너비 또는 높이보다 작은 경우 iframe 요소 오버플로 현상 발생:

이러한 iframe 오버플로는 페이지 레이아웃을 파괴합니다. iframe 요소도 반응형으로 만들 수 있는 방법이 있습니다. 기다려 보세요.

해결책
js 디스플레이를 통해 너비가 설정되지 않으면 iframe 요소 자체를 철회할 수 없습니다. 하지만 iframe-container 요소로 iframe을 래핑하고, iframe-container 요소의 너비가 포함 블록의 너비를 채우도록 하고, 가로 세로 비율에 따라 iframe-container 요소의 padding-bottom 백분율을 설정할 수 있습니다. iframe의

사실 이 방법의 핵심은 iframe-container 요소의 padding-bottom 속성을 설정하는 것입니다. 이 속성을 설정하는 목적은 변장된 요소의 높이를 설정하는 것입니다. padding-bottom의 백분율 설정은 상위 요소의 너비를 기준으로 하기 때문에, height 속성에 대해 백분율을 설정하면 상위 요소의 높이를 기준으로 하며 일반적으로 높이 값에 기본 auto를 사용합니다. 하위 요소의 높이도 0입니다. 따라서 padding-bottom에 대한 속성만 설정할 수 있습니다. 이렇게 하면 iframe 요소가 iframe-container를 채우게 됩니다.

.wrap{
           width: 400px;
           margin: auto;
           border: 5px solid greenyellow;
       }
       .iframe-container{
           height: 0;
           padding-bottom: 97.6%;
           position: relative;
       }
       .iframe-container iframe{
           position: absolute;
           left: 0;
           top: 0;
           width: 100%;
           height: 100%;
       }
       @media screen and (max-width: 400px) {
           .wrap{
               width: 300px;
           }
       }
<div class="wrap">
       <div class="iframe-container">
           <iframe height=498 width=510 src="<a href="http://player.youku.com/embed/XOTE0MjkyODgw">http://player.youku.com/embed/XOTE0MjkyODgw</a>" frameborder=0 allowfullscreen></iframe>
       </div>
   </div>

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

H5의 sse 서버를 사용하여 EventSource 이벤트를 보내는 방법

h5에서 비밀번호 기억 기능을 구현하는 방법

H5 페이지에서 APP 기능을 호출하는 방법

위 내용은 웹에서 iframe 적응형을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!