web-dev-qa-db-fra.com

Comment rendre un iframe responsive sans hypothèse de ratio d'aspect?

Comment rendre une iframe responsive, sans supposer de rapport hauteur/largeur? Par exemple, le contenu peut avoir n'importe quelle largeur ou hauteur, qui est inconnue avant le rendu.

Remarque, vous pouvez utiliser Javascript.

Exemple:

<div id="iframe-container">
    <iframe/>
</div>

Taillez ce iframe-container de sorte que le contenu de celui-ci rentre à peine à l'intérieur sans espace supplémentaire, en d'autres termes, il y a suffisamment d'espace pour le contenu pour qu'il puisse être affiché sans défilement, mais pas d'espace en excès. Le conteneur enveloppe parfaitement l'iframe.

This montre comment rendre un iframe responsive, en supposant que le rapport hauteur/largeur du contenu est de 16: 9. Mais dans cette question, le rapport hauteur/largeur est variable.

javascripthtmlcssiframeresponsive-design
18
ferit

Ma solution est sur GitHub et JSFiddle .

Présentation d'une solution pour iframe responsive sans hypothèse de rapport hauteur/largeur.

Le but est de redimensionner l'iframe lorsque cela est nécessaire, c'est-à-dire lorsque la fenêtre est redimensionnée. Ceci est effectué avec JavaScript pour obtenir la nouvelle taille de la fenêtre et redimensionner l'iframe en conséquence.

NB: N'oubliez pas d'appeler la fonction de redimensionnement après le chargement de la page car la fenêtre n'est pas redimensionnée d'elle-même après le chargement de la page.

Le code

index.html

<!DOCTYPE html>
<!-- Onyr for StackOverflow -->

<html>

<head> 
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>Responsive Iframe</title>
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>

<body id="page_body">
    <h1>Responsive iframe</h1>

    <div id="video_wrapper">
        <iframe id="iframe" src="https://fr.wikipedia.org/wiki/Main_Page"></iframe>
    </div>

    <p> 
        Presenting a solution for responsive iframe without aspect
        ratio assumption.<br><br>
    </p>

    <script src="./main.js"></script>
</body>

</html>

style.css

html {
    height: 100%;
    max-height: 1000px;
}

body {
    background-color: #44474a;
    color: white;
    margin: 0;
    padding: 0;
}

#videoWrapper {
    position: relative;
    padding-top: 25px;
    padding-bottom: 100px;
    height: 0;
    margin: 10;
}
#iframe {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

main.js

let videoWrapper = document.getElementById("video_wrapper");

let w;
let h;
let bodyWidth;
let bodyHeight;

// get window size and resize the iframe
function resizeIframeWrapper() {
    w = window.innerWidth;
    h = window.innerHeight;

    videoWrapper.style["width"] = `${w}px`;
    videoWrapper.style["height"] = `${h - 200}px`;
}

// call the resize function when windows is resized and after load
window.onload = resizeIframeWrapper;
window.onresize = resizeIframeWrapper;

J'ai passé du temps là-dessus. J'espère que vous l'apprécierez =)

Edit C'est probablement la meilleure solution générique. Cependant, lorsqu'elle est très petite, l'iframe n'a pas la taille appropriée. Ceci est spécifique à l'iframe que vous utilisez. Il n'est pas possible de coder une réponse correcte pour ce phénomène à moins d'avoir le code de l'iframe, car votre code n'a aucun moyen de savoir quelle taille est préférée par l'iframe pour être correctement affichée.

Seuls quelques hacks comme celui présenté par @Christos Lytras peuvent faire l'affaire, mais cela ne fonctionnera jamais pour chaque iframe. Juste dans une situation particulière.

0
Onyr