Изменить размер iframe без соотношения сторон

Question

Я пытаюсь создать отзывчивый iframe, который получит карту, но когда я изменяю размер браузера, он меняет размер с использованием соотношения сторон, и я бы хотел, чтобы он оставался заполняющим все пространство. Как в этом примере: http://dev.fhmp.net/tailorfit/demo/, в случае, когда переполнение является обрезкой.

Сегодня это выглядит следующим образом:

.iframe-rwd { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    padding-top: 30px; 
 
    height: 0; 
 
    overflow: hidden; 
 
} 
 
.iframe-rwd iframe { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<section id="container"> 
 
     {% include "main/header.html" %} 
 
     {% include "main/sidebar.html" %} 
 
     <section id="main-content"> 
 
      <section style="padding-right: 0px;padding-left: 0px;" class="wrapper"> 
 
       <div class="iframe-rwd"> 
 
        <iframe 
 
          name="main-content" 
 
          src=""></iframe> 
 
       </div> 
 
      </section> 
 
     </section> 
 
    </section>

Answer 1

Это решение от Дейва Руперта/Chris Coyier (я думаю). Для этого требуется оболочка div, но работает очень хорошо.

HTML

<div class="iframe-rwd"> 
     <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Seattle,+WA&amp;aq=0&amp;oq=seattle&amp;sll=37.822293,-85.76824&amp;sspn=6.628688,16.907959&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Seattle,+King,+Washington&amp;z=11&amp;ll=47.60621,-122.332071&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Seattle,+WA&amp;aq=0&amp;oq=seattle&amp;sll=37.822293,-85.76824&amp;sspn=6.628688,16.907959&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Seattle,+King,+Washington&amp;z=11&amp;ll=47.60621,-122.332071" style="color:#0000FF;text-align:left">View Larger Map</a></small> 
    </div> 

CSS

.iframe-rwd { 
position: relative; 
padding-bottom: 65.25%; 
padding-top: 30px; 
height: 0; 
overflow: hidden; 
} 
.iframe-rwd iframe { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
} 

Answer 2

В прошлом я только установить ширину IFrame до 100%, если у вас есть IFRAME в реагирующей контейнере, чем это всегда будет использовать эту ширину и сохранить ту высоту, на которую вы устанавливаете iframe.