À l'échelle de l'iFrame css largeur de 100% comme l'image
Je tiens à l'échelle d'une iFrame par CSS pour width: 100%
, et la hauteur de l'échelle proportionnellement à la largeur.
Avec un <img>
balise cela fonctionne bien.
L'image et de l'iFrame ont défini la largeur et la hauteur dans le code html.
Voici quelques exemples:
<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>
Cela fonctionne très bien sur les images, mais je voudrais le même comportement pour les 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>
L'iFrame rend 100% de largeur, mais ne l'est pas, c'est la hauteur proportionnelle comme l'image n'.
- Que fais-tu si loin? Pouvez-vous faire un jsfiddle? Permet de voir votre code.
Vous devez vous connecter pour publier un commentaire.
Grande différence entre une image et un iframe est le fait que l'image conserve son aspect ratio. Vous pouvez combiner une image et d'un iframe avec entraînera un réactif iframe.
Espérons que ce answerers votre question.
Vérifier ce lien par exemple : http://jsfiddle.net/Masau/7WRHM/
HTML:
CSS:
note: Ceci ne fonctionne qu'avec un fixe, le rapport d'aspect.
max-width
. Aussi, vous avez oubliéposition:relative
sur le conteneur.max-width
avec votre code, il suffit de l'envelopper dans un autre div:<div style="max-width:520px"><div style="position:relative;padding-top:75.4%"> <iframe style="position:absolute;width:100%;height:100%;top:0;left:0;"></iframe></div></div>
<svg xmlns="http://www.w3.org/2000/svg" style="width:100%;" viewBox="0 0 500 60"></svg>
@Rik, je suppose que c'est plus propre approche.
Il fonctionne avec inline "hauteur" et "largeur" propriétés " (j'ai mis en valeur aléatoire dans le violon pour prouver qu') et avec CSS 'max-width' de la propriété (@Walf do you read me?).
HTML:
CSS:
http://jsfiddle.net/7WRHM/1001/
J'aime cette solution meilleure. Simple, évolutif, adapté. L'idée ici est de créer une hauteur nulle div extérieure avec remplissage en bas de définir le ratio d'aspect de la vidéo. L'iframe est réduite à 100% en largeur et en hauteur, de remplir complètement le récipient externe. Le conteneur extérieur, il adapte automatiquement sa hauteur en fonction de sa largeur, et à l'intérieur de l'iframe s'ajuste en conséquence.
La seule variable est ici le padding-bottom valeur dans la div extérieure. C'est de 75% pour le format 4:3 vidéos, et 56.25% pour le grand écran 16:9 aspect ratio vidéos.
Vous pourriez utiliser la fenêtre d'affichage unités d'ici à la place de %. Comme ceci:
DÉMO (Redimensionner pour voir l'effet)
CSS:
HTML:
@Anachronique est plus proche ici, @Simone en sommes pas loin. La mise en garde avec un pourcentage de rembourrage sur un élément, c'est qu'il est basé sur son parent largeur, donc si différent de votre conteneur, les proportions seront off.
La plus fiable, la réponse la plus simple est:
CSS:
HTML: