Responsywny iframe (google maps) i dziwna zmiana rozmiaru
Staram się dodać mapę Google do mojego projektu, który ma być responsywny. Użyłem tego samego kodu, który działa na obrazkach... Ale z jakiegoś powodu iframe mapy zmienia rozmiar z wymiarami, których nie wybrałem.
HTML
<iframe src="http://maps.google.com/maps/ms?vpsrc=6&ctz=-480&ie=UTF8&msa=0&msid=210840796990572645528.00049770919ccd6759de3&t=m&ll=30.751278,68.203125&spn=84.446143,175.429688&z=2&output=embed" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="635" height="300"> </iframe>
I CSS
iframe {
max-width: 100%;
height: auto;
width: auto; /*IE8 bug fix*/
vertical-align: middle;}
Lub możesz go zobaczyć na żywo i bawić się nim tutaj: http://jsfiddle.net/corinne/pKUzU / (jeśli wyciąć CSS, zobaczysz, co mam na myśli).
Moje pytanie brzmi jak zrobić to iframe / map be reaguje bez utraty pożądanej wysokości?
46
1 answers
To rozwiązanie jest od Dave Rupert / Chris Coyier (myślę). Wymaga wrapper div, ale działa całkiem dobrze.
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&source=s_q&hl=en&geocode=&q=Seattle,+WA&aq=0&oq=seattle&sll=37.822293,-85.76824&sspn=6.628688,16.907959&t=h&ie=UTF8&hq=&hnear=Seattle,+King,+Washington&z=11&ll=47.60621,-122.332071&output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=Seattle,+WA&aq=0&oq=seattle&sll=37.822293,-85.76824&sspn=6.628688,16.907959&t=h&ie=UTF8&hq=&hnear=Seattle,+King,+Washington&z=11&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%;
}
95
Author: cpg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-01 17:58:08
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-01 17:58:08