Вопрос по responsive-design, css, iframe – Масштаб iFrame CSS ширина 100%, как изображение

51

Я хочу масштабировать 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% ширины, но не масштабирует его по высоте, пропорциональной, как изображение.

Error: User Rate Limit Exceeded Lowkase

Ваш Ответ

5   ответов
10

Error: User Rate Limit Exceeded

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

Error: User Rate Limit Exceeded

108

Error: User Rate Limit Exceeded

Error: User Rate Limit ExceededError: User Rate Limit Exceeded

Error: User Rate Limit Exceeded

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

Error: User Rate Limit Exceeded

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

Error: User Rate Limit Exceeded

Whoop. Спасибо за это. Вытащил меня из пробки, пытаясь динамически изменить размер iFrame в мобильной версии сайта. Голосовать: вверх :)
Это блестяще
Тьфу ... мы перестали использовать прозрачные изображения для макета, продолжайте прокручивать, поскольку Simone Lazzari ответ превосходен!
Еще одно замечание: изображение не обязательно (по крайней мере, в современных браузерах). Трюк с отступом (задание отступа для соотношения сторон) работает: & lt; div style = "width: 100%; padding-top: 75.4%" & gt; & lt; iframe style = & quot; позиция: абсолютная; ширина: 100%; высота: 100%; верх: 0; слева: 0; & lt; & lt; / iframe & gt; & Lt; / дел & GT;
@ansiart Ваш трюк с отступом не работает, если вам нужно установитьmax-width, Кроме того, вы забылиposition:relative на контейнере.
56

Error: User Rate Limit Exceeded

Error: User Rate Limit Exceeded

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

Error: User Rate Limit Exceeded

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

Error: User Rate Limit Exceeded

@ Симон, не по теме, но да, я лично предпочитаю подход только css. Хорошее чтение это:alistapart.com/article/creating-intrinsic-ratios-for-video  Для проверки поддержки IE7alistapart.com/d/creating-intrinsic-ratios-for-video/…
Я хотел бы добавить больше ясности к этому ответу, так как он кажется очевидным победителем. Предыдущий ответ, включающий добавление скрытого img для запуска масштабирования, является умным, но форсирование дополнительного http-запроса, особенно на мобильном устройстве, далеко от идеала. Этот чистый ответ CSS - намного лучший подход.
padding-top должен составлять 56,25% или видео шире, чем 16/9
3

Error: User Rate Limit Exceededparent'sError: User Rate Limit Exceeded

Error: User Rate Limit Exceeded

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>

4

Error: User Rate Limit Exceeded

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

DEMO (Resize to see the effect)

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>

Здравствуйте, я думаю, что VW не подходят для этого.jsfiddle.net/bancaf/615y5aou здесь, в упрощенном примере, основанном на вашем коде, высота iframe остается заблокированной до значения по умолчанию 150px (минимальная высота браузера по умолчанию для iframe, я думаю). Что мне не хватает?
Это фантастическое решение, поскольку оно не требует, чтобы в HTML были какие-либо дополнительные теги, а JavaScript не задействован.

Похожие вопросы