उत्तरदायी iframe (google maps) और अजीब आकार बदलना

Question

मैं अपने डिज़ाइन में एक Google मानचित्र जोड़ने की कोशिश कर रहा हूं, जिसे उत्तरदायी माना जाता है। मैंने उसी कोड का उपयोग किया है जो छवियों के लिए काम करता है ... लेकिन किसी कारण से, मानचित्र का आईफ्रेम उन आयामों का आकार बदलता है जिन्हें मैंने नहीं चुना था।

एचटीएमएल

<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>​ 

और सीएसएस

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

या आप यह लाइव देख सकते हैं और यहां इसके साथ बेला कर सकते हैं: http://jsfiddle.net/corinne/pKUzU/ (यदि आप सीएसएस दूर कटौती, आप क्या देखेंगे मेरा मतलब)।

मेरा सवाल यह है कि इस आईफ़्रेम/मानचित्र को अपनी इच्छित ऊंचाई खोए बिना उत्तरदायी कैसे बनाया जाए?

Answer 1

यह समाधान डेव रूपर्ट/क्रिस कोयियर (मुझे लगता है) से है। यह एक रैपर div की आवश्यकता है लेकिन बहुत अच्छी तरह से काम करता है।

एचटीएमएल

<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> 

सीएसएस

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