Масштаб iFrame css шириной 100%, как изображение

Я хочу масштабировать iFrame через CSS до width: 100%, а высота должна масштабироваться пропорционально ширине.

С тегом <img> это отлично работает.

Оба изображения и iFrame определяют ширину и высоту в html.

Вот несколько примеров:

<html>
    <style>
        #a{ width: 500px; }
        img{ width: 100%; height: auto }
    </style>
    <body>
        <div id="a">
            <img src="http://lorempixel.com/200/150/" width="200" height="150" />
        </div>
    </body>

Это отлично работает на изображениях, но я хотел бы, чтобы такое же поведение для iFrames:

<html>
    <style>
        #a{ width: 900px; background: grey;}
        iframe{ width: 100%; height: auto }
    </style>
    <body>
        <div id="a">
            <iframe width="560" height="315" src="http://www.youtube.com/embed/RksyMaJiD8Y" frameborder="0" allowfullscreen></iframe>
        </div>
    </body>

iFrame отображает 100% ширину, но не масштабирует его пропорционально по высоте, как это делает изображение.

Ответ 1

Большая разница между изображением и iframe заключается в том, что изображение сохраняет соотношение сторон. Вы можете комбинировать изображение, и iframe с результатом будет реагировать iframe. Надеюсь, это ответит на ваш вопрос.

Посмотрите эту ссылку, например: http://jsfiddle.net/Masau/7WRHM/

HTML:

<div class="wrapper">
    <div class="h_iframe">
        <!-- a transparent image is preferable -->
        <img class="ratio" src="http://placehold.it/16x9"/>
        <iframe src="http://www.youtube.com/embed/WsFWhL4Y84Y" frameborder="0" allowfullscreen></iframe>
    </div>
    <p>Please scale the "result" window to notice the effect.</p>
</div>

CSS

html,body        {height:100%;}
.wrapper         {width:80%;height:100%;margin:0 auto;background:#CCC}
.h_iframe        {position:relative;}
.h_iframe .ratio {display:block;width:100%;height:auto;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}

Примечание. Это работает только с фиксированным соотношением сторон.

Ответ 2

@Rik, я полагаю, это более чистый подход. Он работает со встроенными свойствами "высота" и "ширина" (я устанавливаю случайное значение в скрипте, чтобы это доказать) и с свойством CSS max-width (@Walf вы меня читаете?).

HTML:

<div class="wrapper">
    <div class="h_iframe">
        <iframe height="2" width="2" src="http://www.youtube.com/embed/WsFWhL4Y84Y" frameborder="0" allowfullscreen></iframe>
    </div>
    <p>Please scale the "result" window to notice the effect.</p>
</div>

CSS

html,body        {height: 100%;}
.wrapper         {width: 80%; max-width: 600px; height: 100%; margin: 0 auto; background: #CCC}
.h_iframe        {position: relative; padding-top: 56%;}
.h_iframe iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

http://jsfiddle.net/7WRHM/1001/

Ответ 3

Мне нравится это решение лучше всего. Простой, масштабируемый, отзывчивый. Идея здесь состоит в том, чтобы создать внешний div с нулевой высотой с нижним заполнением, установленным на соотношение сторон видео. IFrame масштабируется до 100% как по ширине, так и по высоте, полностью заполняя внешний контейнер. Внешний контейнер автоматически регулирует его высоту в соответствии с его шириной, а внутренняя граница iframe настраивается соответственно.

<div style="position:relative; width:100%; height:0px; padding-bottom:56.25%;">
    <iframe style="position:absolute; left:0; top:0; width:100%; height:100%"
        src="http://www.youtube.com/embed/RksyMaJiD8Y">
    </iframe>
</div>

Единственная переменная здесь - это нижнее значение padding в внешнем div. Это 75% для видеоизображений формата 4: 3 и 56,25% для широкоэкранных видеоизображений формата 16: 9.

Ответ 4

Здесь вы можете использовать единицы просмотра, а не%. Вот так:

iframe {
    max-width: 100vw;
    max-height: 56.25vw; /* height/width ratio = 315/560 = .5625 */
}

DEMO (Изменить размер, чтобы увидеть эффект)

body {
  margin: 0;
}
.a {
  max-width: 560px;
  background: grey;
}
img {
  width: 100%;
  height: auto
}
iframe {
  max-width: 100vw;
  max-height: 56.25vw;
  /* 315/560 = .5625 */
}

<div class="a">
  <img src="http://lorempixel.com/560/315/" width="560" height="315" />
</div>

<div class="a">
  <iframe width="560" height="315" src="http://www.youtube.com/embed/RksyMaJiD8Y" frameborder="0" allowfullscreen></iframe>
</div>

Ответ 5

@Анахронист ближе всего, @Simone не за горами. Предостережение с процентным заполнением элемента состоит в том, что оно основано на ширине его родителя, поэтому, если оно отличается от вашего контейнера, пропорции будут отключены.

Самый надежный, самый простой ответ:

body {
  /* for demo */
  background: lightgray;
}
.fixed-aspect-wrapper {
  /* anything or nothing, it doesn't matter */
  width: 60%;
  /* only need if other rulesets give this padding */
  padding: 0;
}
.fixed-aspect-padder {
  height: 0;
  /* last padding dimension is (100 * height / width) of item to be scaled */
  padding: 0 0 56.25%;
  position: relative;
  /* only need next 2 rules if other rulesets change these */
  margin: 0;
  width: auto;
}
.whatever-needs-the-fixed-aspect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* for demo */
  border: 0;
  background: white;
}

<div class="fixed-aspect-wrapper">
  <div class="fixed-aspect-padder">
    <iframe class="whatever-needs-the-fixed-aspect" src="/"></iframe>
  </div>
</div>

Ответ 6

Я знаю его немного поздно, но я создал script, помогая масштабировать iframes до 100% его родительской ширины, как вы описываете. https://github.com/LasseHaslev/iframe-scaler