Определите размер фрейма, а затем автоматически измените его размер до ширины браузера. - PullRequest
Новая
       71

Определите размер фрейма, а затем автоматически измените его размер до ширины браузера.

0 голосов
/ 28 января 2020

Я встраиваю iframe с определенным размером {500x320} (только для сохранения соотношения), тогда мне нравится иметь родительский контейнер для автоматического изменения размера всего iframe до ширины браузера.

Но поскольку я уже определил ширину и высоту, iframe на самом деле не изменяет размеры или не отвечает на родительский контейнер. Я также приложил снимок экрана, на котором iframe не адаптируется к ширине браузера.

Что я делаю не так?

Html: 

<div class="container">
    <div class="iframe"> </div>
</div>

Мой CSS: 

    .container {
    width:80%;
    height:auto;
}

    .iframe {
    width:500px;
    height:320px;
}

View this image

Ответы [ 3 ]

0 голосов
/ 28 января 2020

Вам просто нужно установить ширину: 100%; и высота: 100%; 

 .container {
    width:80%;
    height:auto;
}

    .iframe {
    width:500px;
    height:320px;
}
.iframe iframe{
    width: 100%;
    height: 100%;
    }
<div class="container">
    <div class="iframe"> 
    <iframe src="https://api.jquery.com/focus/">
    
    </iframe>
    </div>
</div>
0 голосов
/ 30 января 2020

Я нашел решение своей проблемы. Возможно, я не правильно задал свой вопрос. Задача состояла в том, чтобы сохранить соотношение сторон кадра, позволяя изменить размер до ширины браузера.

HTML

<div class="video-container">
    <iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0">
    </iframe>
</div>

CSS: 

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}


    .video-container iframe {
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
    }

См. Перо Отзывчивый iframe с соотношением сторон на CodePen

Я нашел решение с этого сайта

0 голосов
/ 28 января 2020

Вам нужно добавить css непосредственно в iframe. проверьте это. 

    .container {
    width:80%;
    height:auto;
}

    .iframe {
    width:500px;
    height:320px;
}

.iframe iframe{width:100%; height:100%;}
<div class="container">
    <div class="iframe">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/C0DPdy98e4c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
</div>
...