반응 형 테마의 반응 iframe

웹 사이트 테마처럼 삽입 iframe을 어떻게 반응시킬 수 있습니까? iframe을 통해 계산기가 있습니다.반응 형 테마의 반응 iframe

여기

가 포함 된 iframe이 코드

<iframe style="border: currentColor; width: 375px; height: 800px; margin-top: -159px; margin-left: 410px; position: relative;" src="http://www.calculator-bmi.com/wp-content/themes/genesis-flint/js/" height="240" width="320"></iframe>

에게이며, {100 % 최대 폭} 그러나 내가이 CSS

은 iframe, 개체 삽입을 배치 후에도 테마 응답을 따르지 않는 네가 이걸 도와 줄 수 있었으면 좋겠어.

출처

2014-03-19 user3416962

iframe, object, embed { 
    width: 100% !important; 
    height: 800px !important; 
    margin: 0 !important; 
    border: none; 
}

예 : http://jsfiddle.net/d6ufL/

출처

2014-04-28 21:30:23 Raul

나는 조금 늦게 파티에이야 어쨌든 기여하기로 결정했다. 종횡비를 유지하면서 가로 및 세로로 응답하는 iframe을 만드는 것은 약간 까다 롭습니다.

귀하의 HTML을 iframe을위한 용기가 있어야합니다

.embed-container-noframe { 
    height: 0; 
    width: 100%; 
    padding-bottom: 70%; 
    overflow: hidden; 
    position: relative; 
} 

.embed-container-noframe iframe { 
    width: 100%; 
    height: 100%; 
}

당신은 할 수 있습니다 여기

<div class="embed-container-noframe"> 
    <iframe src="http://www.calculator-bmi.com/wp-content/themes/genesis-flint/js/"></iframe> 
</div>

과 같은 가로 세로 비율을 유지하면서 수평으로 사용할 수있는 전체 공간을 채우기 만들기위한 CSS의 컨테이너의 패딩 하단 속성을 조정하여 종횡비를 변경하십시오. 여기 http://jsfiddle.net/dWrR2/

출처

2014-07-29 07:46:51 jesseniem

내 솔루션 >>은 iframe + JQuery와이고 매력처럼 작동 :

여기에 재생하는 jsfiddle입니다. jsfiddle >>http://jsfiddle.net/leowebdev/6NSX3/

<html lang="en" class="no-js"> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width,initial-scale=1.0"> 
     <style> 
     html body {width: 100%;height: 100%;padding: 0px;margin: 0px;overflow: hidden;font-family: arial;font-size: 10px;color: #6e6e6e;background-color: #000;} #preview-frame {width: 100%;background-color: #fff;}</style> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script> 
     var calcHeight = function() { 
      $('#preview-frame').height($(window).height()); 
     } 

     $(document).ready(function() { 
      calcHeight(); 
     }); 

     $(window).resize(function() { 
      calcHeight(); 
     }).load(function() { 
      calcHeight(); 
     }); 
     </script> 
    </head> 
    <body> 
     <iframe id="preview-frame" src="http://yourwebsitehere.com/" name="preview-frame" frameborder="0" noresize="noresize"> 
     </iframe> 
    </body> 
</html>

출처

2014-08-05 21:29:15 leowebguy

반응 형 테마의 반응 iframe

답변

관련 문제