0
Kayıt Ol

iframeleri width %100 yapma

1

●

2.102

  • 30-01-2016, 09:10:25
    #1
    CengiS
    CengiS
    Kimlik doğrulama veya yönetimden onay bekliyor.
    selam arkadaşlar google maps kodunu mobile uyumlu hale getirmeye çalışıyorum ama genişlik ölçüsüne %'li değer veremiyorum yardımcı olurmusunuz.
  • 30-01-2016, 18:50:46
    #2
    Misafir
    Misafir
    CengiS adlı üyeden alıntı: mesajı görüntüle
    selam arkadaşlar google maps kodunu mobile uyumlu hale getirmeye çalışıyorum ama genişlik ölçüsüne %'li değer veremiyorum yardımcı olurmusunuz.
    Merhaba, size elimden geldiğince yardımcı olmak isterim...

    Şurada bir döküman buldum:
    http://www.labnol.org/internet/embed...le-maps/28333/

    Bu kod normalde Google'dan aldığımız kod ::
    [B]<!-- Height=450px; Width=600px -->
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="600" height="450" frameborder="0" style="border:0"></iframe>[/B]
    Burda ise bir DIV içerisine alınıp div ögesine belli css kodları uygulanmış ::

    [B]<style>
    .google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
</style>
 
<div class="google-maps">
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>[/B]
    Umarım yardımcı olabilmişimdir