Khung nội tuyến đáp ứng (bản đồ google) và thay đổi kích thước lạ

Question

Tôi đang cố gắng thêm Bản đồ Google vào thiết kế của mình, đó là nghĩa vụ phải đáp ứng. Tôi đã sử dụng cùng một mã hoạt động cho hình ảnh ... Nhưng vì một lý do nào đó, iframe của bản đồ thay đổi kích thước với kích thước mà tôi không chọn.

HTML

<iframe src="http://maps.google.com/maps/ms?vpsrc=6&amp;ctz=-480&amp;ie=UTF8&amp;msa=0&amp;msid=210840796990572645528.00049770919ccd6759de3&amp;t=m&amp;ll=30.751278,68.203125&amp;spn=84.446143,175.429688&amp;z=2&amp;output=embed" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="635" height="300"> </iframe>​ 

và CSS

iframe { 
max-width: 100%; 
height: auto; 
width: auto; /*IE8 bug fix*/ 
vertical-align: middle;} 

Hoặc bạn có thể xem nó sống và fiddle với nó ở đây: http://jsfiddle.net/corinne/pKUzU/ (nếu bạn cắt bỏ CSS, bạn sẽ thấy những gì Ý tôi là).

Câu hỏi của tôi là làm cách nào để khung nội tuyến/bản đồ này đáp ứng mà không làm mất chiều cao mong muốn?

Answer 1

Giải pháp này là từ Dave Rupert/Chris Coyier (tôi nghĩ). Nó đòi hỏi một div wrapper nhưng hoạt động khá tốt.

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%; 
}