iFrame - Small, it's beautiful

Pour ceux qui me connaissent, vous savez que les anglicismes ne sont pas ma tasse de thé, mais là, je n'ai pas trouvé mieux comme titre pour présenter cette astuce qui m'a permis d'arriver au résultat que je souhaitais.

Les besoins

Mon besoin était simple, je voulais afficher une réduire les dimensions d'une iFrame en réduisant, de fait, le contenu.

En gros j'avais une iFrame en 728x90 et eej voulais la réduire de 50%.

Bien entendu, vous aurez compris le besoin que j'avais en analysant ces dimensions :-)

La mise en oeuvre

Et, en cherchant sur le Net, j'ai trouvé l'arme ultime pour réussir à faire ce que je voulais.

C'ets simple, bête, efficace, en gros une siolution normale lorsque tu connais l'astuce.

Donc j'ai ma structure de base genre :

<iframe src="https://url.com" width="728" height="90" marginheight="0" marginwidth="0" scrolling="no" style="border:none;"></iframe>

Je me dit qu'il faut réduire les dimension, donc on bascule sur le zoom, mais en fin de compte pour fonctionner sur tous les navigateurs il faut beaucoup plus de choses, comme des transformations :

<iframe src="https://url.com" width="728" height="90" marginheight="0" marginwidth="0" scrolling="no" style="border:none;-ms-zoom: 0.5;-moz-transform: scale(0.5);-moz-transform-origin: 0 0;-o-transform: scale(0.5);-o-transform-origin: 0 0;-webkit-transform: scale(0.5);-webkit-transform-origin: 0 0;"></iframe>

Le résultat est là, l'affichage est réduit de 50% (0.5) mais l'emplacement réservé lors de l'affichage reste le même, ce qui est très moche.

Il faut donc trouver un contournement, ce qui est très souvent le cas dans notre métier.

Dans ce cas, c'est assez simple, il suffit d'inclure l'élément réduit dans un élémé,nent de la bonne taille au départ.

Ici, on fait un réduction de 50% soit 364px en largeur et 45 px en hauteur.

ce qui nous donne au final :

<div style="overflow:hidden;width:364px;height:45px;display:block">
<iframe src="https://url.com" width="728" height="90" marginheight="0" marginwidth="0" scrolling="no" style="border:none;-ms-zoom: 0.5;-moz-transform: scale(0.5);-moz-transform-origin: 0 0;-o-transform: scale(0.5);-o-transform-origin: 0 0;-webkit-transform: scale(0.5);-webkit-transform-origin: 0 0;"></iframe>
</div>

Je sors le css du code, on a sur la div :

overflow:hidden;
width:364px;
height:45px;
display:block

et sur l'iframe :

border:none;
-ms-zoom: 0.5;
-moz-transform: scale(0.5);
-moz-transform-origin: 0 0;
-o-transform: scale(0.5);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.5);
-webkit-transform-origin: 0 0;

Vous aurez repéré l'overflow sur le contenu de la div principale. Le petit détail qui fait la différence pour la qualité d'affichage, puisqu'il permet de cacher tout ce qui dépasse du cadre de la DIV et donc évite d'avoir des troubles d'affichage si l'élément interne n'est pas réduit tout de suite ou rencontre un bug.

Le display:block est là pour forcer le passage à la ligne de l'élément, vous pouvez le retitrer, si vous souhaitez que votre affichage se fasse dans le prolongement du code précédent dans la page.

Conclusion

Je sais l'astuce, n'est pas un truc révolutionnaire de dingue, mais personnellement, ce sont ces petit trucs qui me permettent de m'améliorer et d'intégrer des idées de conception pour de nouveaux projets.