Comment puis-je adapter le contenu d'une iframe intégrée à ma page Web ?

Mise à l'échelle du contenu d'une iframe intégrée

L'intégration d'iframes dans vos pages Web vous permet d'afficher du contenu externe sans quitter la page principale. Cependant, ajuster la taille du contenu intégré peut être nécessaire pour optimiser sa présentation.

Solution :

L'approche suggérée par Kip peut faire évoluer efficacement le contenu dans une iframe, y compris navigateurs comme Opera et Safari. Voici le CSS mis à jour pour implémenter sa solution :

#wrap { 
  width: 600px; 
  height: 390px; 
  padding: 0; 
  overflow: hidden; 
}
#frame { 
  width: 800px; 
  height: 520px; 
  border: 1px solid black; 
}
#frame {
  -ms-zoom: 0.75;
  -moz-transform: scale(0.75);
  -moz-transform-origin: 0 0;
  -o-transform: scale(0.75);
  -o-transform-origin: 0 0;
  -webkit-transform: scale(0.75);
  -webkit-transform-origin: 0 0;
}

Ce CSS modifie les propriétés des éléments #wrap et #frame pour contrôler la taille globale et l'affichage de l'iframe. En spécifiant une échelle de transformation de 0,75, le contenu de l'iframe sera réduit à 80 % de sa taille d'origine, préservant ainsi son rapport hauteur/largeur.

Pour éviter l'apparition de barres de défilement dans l'iframe, vous pouvez également souhaiter ajouter overflow: caché à la déclaration CSS #frame.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!