Вопросы Теги

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

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

С тегом все работает нормально.

Ширина и высота изображения и 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>

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

<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% по ширине, но не масштабируется по высоте пропорционально изображению.

52
задан admdrew 6 October 2014 в 08:18
поделиться