Question

HTML：

<body>
    <header>
        <p>header</p>
    </header>
    <menu>
        <p>menu</p>
    </menu>
    <main>
        <iframe src="http://player.twitch.tv/?channel=dallas&muted=true" frameborder="0" scrolling="no" allowfullscreen="false"></iframe>
    </main>
    <footer>
        <p>footer</p>
    </footer>
</body>

CSS：

body {
    margin: 0;
    color: white;
}

header {
    height: 108px;
    background-color: black;
    font-size: 1em;
    position: fixed;
    top: 0;
    width: 100%;
}

@media screen and (max-width: 600px) {
    header {
        font-size: 0.5em;
    }
    menu {
        font-size: 0.7em;
    }
    footer {
        font-size: 0.6em;
    }
}

menu {
    height: 47px;
    background-color: black;
    position: fixed;
    top: 108px;
    width: 100%;
    margin: inherit;
}

main {
    background-color: orangered;
    text-align: center;
    position: fixed;
    top: 155px;
    bottom: 51px;
    width: 100%;
}

main iframe {
    display: inline-block;
    height: 100%;
    margin: 0 auto;
}

footer {
    height: 51px;
    background-color: black;
    position: fixed;
    bottom: 0;
    width: 100%;
}

iframe高度是固定的并占据主要的所有高度，如何在保持16：9比例的同时更改页面大小时更改宽度？在600px以下情况应该反转，宽度应该是固定的（等于页面的宽度），以及可变高度，保持16：9的比例。

Answer 1

将您的main iframe的CSS更改为此，它会起作用。
祝你好运！

编辑：哦，这是CodePen给你的！ https://codepen.io/rickydam/pen/weGvvW

main iframe {
  display: inline-block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  margin: 0 auto;
}

div中的响应iframe

1 个答案: