disent que vous vouliez mettre le site web CSS-Tricks dans un<iframe>. Vous feriez cela comme ceci:
<iframe src="https://css-tricks.com"></iframe>Sans autre style, vous obtiendrez un rectangle de 300×150 pixels. Ce n’est même pas dans la feuille de style de L’Agent utilisateur, c’est juste une chose magique à propos des iframes (et des objets). Ce n’est presque certainement pas ce que vous voulez, vous verrez donc souvent les attributs width et height directement sur l’iframe lui-même (YouTube le fait).
<iframe width="560" height="315" src="https://css-tricks.com"></iframe>Ces attributs sont bien d’avoir., C’est un début vers la réservation d’un espace pour l’iframe qui est beaucoup plus proche de la façon dont il va finir. Rappelez-vous, la mise en page jank est mauvaise. Mais nous avons plus de travail à faire puisque ce sont des numéros fixes, plutôt qu’une configuration réactive.
la meilleure astuce pour les iframes réactifs, pour l’instant, est de créer une boîte de rapport d’aspect. Vous avez d’abord besoin d’un élément parent avec un positionnement relatif. L’iframe est l’élément enfant à l’intérieur, auquel vous appliquez un positionnement absolu afin de remplir la zone., La partie délicate est que l’élément parent devient la hauteur parfaite en créant un pseudo-élément pour le pousser à cette hauteur en fonction du rapport d’aspect. Le but est que pousser l’élément à la bonne taille est un système plus agréable que de forcer une certaine hauteur. Dans le scénario où le contenu à l’intérieur est plus grand que ce que le rapport d’aspect représente, il peut toujours croître plutôt que de déborder.
je vais juste mettre une démo complète ici (qui fonctionne aussi pour les images):
voir le stylo
responsive Iframe par Chris Coyier (@chriscoyier)
sur CodePen.,
chaque fois que nous avons affaire à des rapports d’aspect, cela me fait penser à un avenir avec une meilleure gestion. Il y a l’attribut expérimental intrinsicsize que je pourrais imaginer être assez agréable pour les iframes en plus des images. De plus, il y a l’espoir-will-exist-soon aspect-ratio en CSS et l’idée qu’il pourrait utiliser par défaut les attributs width Et height sur l’élément, qui, j’espère, s’étendrait aux iframes.