Responsive iframe in einem div

HTML:Responsive iframe in einem div

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

Die iframe Höhe ist fest und nimmt die ganze Höhe des Hauptes, wie die Breite zu ändern, wenn die Seitengröße zu ändern unter Beibehaltung des 16: 9-Verhältnisses? Unter 600px sollte die Situation umgekehrt werden, die Breite sollte fest sein (gleich der Breite der Seiten) und die variable Höhe, das Verhältnis 16: 9 beibehalten.

Quelle

2017-06-10 Felix

Ändern Sie die CSS für Ihre main iframe zu diesem und es wird funktionieren.
Viel Glück!

BEARBEITEN: Oh, und hier ist ein CodePen für Sie! https://codepen.io/rickydam/pen/weGvvW

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

Quelle

2017-06-10 13:33:34

iframe nimmt den ganzen Raum des Haupt auf diese Weise ... ich es vorziehen, dass iframe ein festes Verhältnis von 16 gehalten: 9, die Hintergrundfarbe des Haupt zeigt, wo es nicht – Felix

Felix ankommt, so etwas wie Dies? http://i.imgur.com/kgBn8lV.jpg –

genau, nur dass – Felix

Responsive iframe in einem div

Antwort

Verwandte Themen