Comment puis-je faire évoluer le contenu Iframe à 80 % de sa taille d'origine à l'aide de CSS ?

Mise à l'échelle du contenu dans une iframe

Pour mettre à l'échelle le contenu d'une iframe à la taille souhaitée, vous pouvez utiliser des transformations CSS. Dans ce cas, l'objectif est d'afficher l'iframe avec 80 % de sa taille d'origine.

La solution de Kip, avec de légères modifications, permet d'y parvenir dans des navigateurs comme Opera et Safari. Le CSS doit être ajusté comme suit :

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

Dans ce code, la propriété "-ms-zoom" est spécifique à Internet Explorer, tandis que les autres propriétés de transformation s'appliquent aux autres navigateurs. Définir la valeur « scale » sur 0,75 réduit efficacement le contenu iframe à 75 % de sa taille d'origine.

De plus, vous souhaiterez peut-être définir « overflow : masqué » sur l'élément « frame » pour supprimer l'apparence. de barres de défilement. Cela garantira que le contenu mis à l'échelle reste dans les dimensions spécifiées.

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!