Dimensionner une image dans un FRAME selon sa largeur
mageetlent
Messages postés
13
Date d'inscription
dimanche 16 novembre 2008
Statut
Membre
Dernière intervention
24 novembre 2010
-
16 nov. 2010 à 15:25
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 - 25 nov. 2010 à 13:09
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 - 25 nov. 2010 à 13:09
A voir également:
- Dimensionner une image dans un FRAME selon sa largeur
- Convolution image - Conseils pratiques -Java
- Comment savoir si un fichier est une image - Forum C# / .NET
- Une image .tiff repose sur une palette de 256 000 couleurs. - Forum C / C++ / C++.NET
- Eframe, e-frame - Forum Javascript / DHTML
- Inverser les couleurs d'une image ✓ - Forum Visual Basic 6
10 réponses
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
17
16 nov. 2010 à 19:02
16 nov. 2010 à 19:02
Bonjour,
J'ai cherché en anglais et en français
il fallait chercher en CSS
Attention :
- le rendu peut être catastrophique si l'image est surdimensionnée
- l'utilisation de FRAME n'est plus mode
;O)
J'ai cherché en anglais et en français
il fallait chercher en CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Photo 100%</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
html, body {
margin : 0px;
height : 100%;
width : 100%;
}
#fond, #fond img {
width : 100%;
height : 100%;
display : block;
}
</style>
</head>
</html>
point besoin de rien d'autre
Attention :
- le rendu peut être catastrophique si l'image est surdimensionnée
- l'utilisation de FRAME n'est plus mode
;O)
mageetlent
Messages postés
13
Date d'inscription
dimanche 16 novembre 2008
Statut
Membre
Dernière intervention
24 novembre 2010
16 nov. 2010 à 20:12
16 nov. 2010 à 20:12
Merci beaucoup, Petole Team
C'est vrai que je n'avais pas pensé aux CSS.
Mais d'une part, il semble que ça ne redimensionne que la largeur et pas la hauteur,
bon ça c'est pas grave, j'aurais bien trouvé un moyen.
Mais comme je suis en Frameset, qui je le sais n'est plus de mode, (mais là il faudrait que je refasse les quelques centaines de pages de mon site, ça viendra un jour, mais pour l'instant il fonctionne bien ainsi) et que j'ai une fonction window.location.replace pour remettre une page chargée individuellement dans le frameset, je vois un court instant mon image dilatée, mais dès que la page est rechargée dans le frameset, l'effet CSS disparait et ma page est comme avant.
Alors j'ai pensé entretemps à la méthode suivante : puisque mon frame de gauche a une largeur fixe, en allant chercher la largeur du navigateur et en soustrayant la largeur de mon frame de gauche, je devrais obtenir la largeur de mon frame de droite. Mais comme je suis nul en javascript et que je ne fais que trifouiller des bouts de code que je trouve sur le net, je vais essayer dans cette voie mais ça risque d'être laborieux...
En tous cas, merci encore pour ton aide sympa et qui m'en a appris un peu plus !
Mage et Lent, un des trois
C'est vrai que je n'avais pas pensé aux CSS.
Mais d'une part, il semble que ça ne redimensionne que la largeur et pas la hauteur,
bon ça c'est pas grave, j'aurais bien trouvé un moyen.
Mais comme je suis en Frameset, qui je le sais n'est plus de mode, (mais là il faudrait que je refasse les quelques centaines de pages de mon site, ça viendra un jour, mais pour l'instant il fonctionne bien ainsi) et que j'ai une fonction window.location.replace pour remettre une page chargée individuellement dans le frameset, je vois un court instant mon image dilatée, mais dès que la page est rechargée dans le frameset, l'effet CSS disparait et ma page est comme avant.
Alors j'ai pensé entretemps à la méthode suivante : puisque mon frame de gauche a une largeur fixe, en allant chercher la largeur du navigateur et en soustrayant la largeur de mon frame de gauche, je devrais obtenir la largeur de mon frame de droite. Mais comme je suis nul en javascript et que je ne fais que trifouiller des bouts de code que je trouve sur le net, je vais essayer dans cette voie mais ça risque d'être laborieux...
En tous cas, merci encore pour ton aide sympa et qui m'en a appris un peu plus !
Mage et Lent, un des trois
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
17
17 nov. 2010 à 18:54
17 nov. 2010 à 18:54
Bonjour,
concernant l'utilisation des FRAMEs il est clair que si le site est en place, point n'est nécessaire de ce faire souffrance en changeant tout, cela vaut surtout pour de nouvelle page.
concernant ton soucis pourrait on avoir un exemple en ligne pour mieux ce rendre compte, je dois admettre que j'ai du mal à visualiser le problème.
;O)
concernant l'utilisation des FRAMEs il est clair que si le site est en place, point n'est nécessaire de ce faire souffrance en changeant tout, cela vaut surtout pour de nouvelle page.
concernant ton soucis pourrait on avoir un exemple en ligne pour mieux ce rendre compte, je dois admettre que j'ai du mal à visualiser le problème.
;O)
mageetlent
Messages postés
13
Date d'inscription
dimanche 16 novembre 2008
Statut
Membre
Dernière intervention
24 novembre 2010
18 nov. 2010 à 18:54
18 nov. 2010 à 18:54
Mais bien sûr, http://jpjb.eu
Ce que je voudrais faire, c'est surtout pour les tableaux et dessins (voir ces rubriques) de pouvoir faire profiter les visiteurs d'une meilleure définition des détails qui ont leur importance surtout pour les dessins très fouillés. Et donc de rajouter un petit bout de code pour que les visiteurs qui ont un grand écran puissent avoir toute la largeur souhaitable en cliquant sur l'image. En ce cas, je
mettrais des images à plus haute définition.
Dans quelques temps, j'essayerai de refaire tout le site dans des techniques plus modernes, mais il faudra que je pioche les CSS, PHP et compagnie car je suis un peu largué. Quand j'avais commencé ce site, il y a une dizaine d'années, j'écrivais directement en HTML, sans aide d'un programme, juste avec un éditeur de texte....
Merci de t'intéresser à mon petit problème !!!!!
Mage et Lent, un des trois
Ce que je voudrais faire, c'est surtout pour les tableaux et dessins (voir ces rubriques) de pouvoir faire profiter les visiteurs d'une meilleure définition des détails qui ont leur importance surtout pour les dessins très fouillés. Et donc de rajouter un petit bout de code pour que les visiteurs qui ont un grand écran puissent avoir toute la largeur souhaitable en cliquant sur l'image. En ce cas, je
mettrais des images à plus haute définition.
Dans quelques temps, j'essayerai de refaire tout le site dans des techniques plus modernes, mais il faudra que je pioche les CSS, PHP et compagnie car je suis un peu largué. Quand j'avais commencé ce site, il y a une dizaine d'années, j'écrivais directement en HTML, sans aide d'un programme, juste avec un éditeur de texte....
Merci de t'intéresser à mon petit problème !!!!!
Mage et Lent, un des trois
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
17
18 nov. 2010 à 23:01
18 nov. 2010 à 23:01
Bonjour,
Mais bien sûr, http://jpjb.eu
fort intéressant au demeurant...
Une solution serait de mettre une DIV en pleine fenêtre de la FRAME en position fixed, position reconnue par presque tout les derniers navigateurs, hors IE6 qui représente environ 5%, et de centrer la photo sur celle ci.
La photo pouvant être réajuster ensuite au mieux de la largeur.
...j'écrivais directement en HTML, sans aide d'un programme, juste avec un éditeur de texte.... ...
c'est comme cela que les codes sont les plus propres!
;O)
Mais bien sûr, http://jpjb.eu
fort intéressant au demeurant...
Une solution serait de mettre une DIV en pleine fenêtre de la FRAME en position fixed, position reconnue par presque tout les derniers navigateurs, hors IE6 qui représente environ 5%, et de centrer la photo sur celle ci.
La photo pouvant être réajuster ensuite au mieux de la largeur.
...j'écrivais directement en HTML, sans aide d'un programme, juste avec un éditeur de texte.... ...
c'est comme cela que les codes sont les plus propres!
;O)
mageetlent
Messages postés
13
Date d'inscription
dimanche 16 novembre 2008
Statut
Membre
Dernière intervention
24 novembre 2010
22 nov. 2010 à 17:18
22 nov. 2010 à 17:18
C'est bizarre, j'avais répondu, mais ma réponse est partie aux oubliettes, on dirait.
Merci pour ton aide, merci pour le compliment.
Je galère... mais j'y arriverai. C'est drôle parce que je crois que c'est une pratique élémentaire, mais je ne trouve pas exactement mon cas de figure dans les nombreux exemples sur le net.
Mon problème reste d'adatpter la hauteur à la largeur.
J'ai fait ça, mais rien ne marche pour l'instant :
TITRE
<script language=javascript>
<!--
//opera, Netscape 6, Netscape 4x, Mozilla
if (window.innerWidth || window.innerHeight){
largeurdoc=window.innerWidth;
hauteurdoc=window.innerHeight;
}
//IE, Mozilla
if (document.body.clientWidth || document.body.clientHeight){
largeurdoc=document.body.clientWidth;
hauteurdoc=document.body.clientHeight;
}
var img = document.getElementById('myimg');
var iwidth = img.clientWidth;
var iheight = img.clientHeight;
var largeur=largeurdoc;
var hauteur=largeurdoc*iheight/iwidth;
document.write('\
\
');
//-->
</script>
Mage et Lent, un des trois
Merci pour ton aide, merci pour le compliment.
Je galère... mais j'y arriverai. C'est drôle parce que je crois que c'est une pratique élémentaire, mais je ne trouve pas exactement mon cas de figure dans les nombreux exemples sur le net.
Mon problème reste d'adatpter la hauteur à la largeur.
J'ai fait ça, mais rien ne marche pour l'instant :
TITRE
<script language=javascript>
<!--
//opera, Netscape 6, Netscape 4x, Mozilla
if (window.innerWidth || window.innerHeight){
largeurdoc=window.innerWidth;
hauteurdoc=window.innerHeight;
}
//IE, Mozilla
if (document.body.clientWidth || document.body.clientHeight){
largeurdoc=document.body.clientWidth;
hauteurdoc=document.body.clientHeight;
}
var img = document.getElementById('myimg');
var iwidth = img.clientWidth;
var iheight = img.clientHeight;
var largeur=largeurdoc;
var hauteur=largeurdoc*iheight/iwidth;
document.write('\
\
');
//-->
</script>
Mage et Lent, un des trois
mageetlent
Messages postés
13
Date d'inscription
dimanche 16 novembre 2008
Statut
Membre
Dernière intervention
24 novembre 2010
23 nov. 2010 à 14:09
23 nov. 2010 à 14:09
RESOLU
Enfin pas vraiment, mais j'ai trouvé PopBox.js, une solution un peu différente, mais qui répond très bien à mes désirs.
Mage et Lent, un des trois
Enfin pas vraiment, mais j'ai trouvé PopBox.js, une solution un peu différente, mais qui répond très bien à mes désirs.
Mage et Lent, un des trois
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
17
23 nov. 2010 à 18:32
23 nov. 2010 à 18:32
Bonjour,
tu n'en était pas loin du tout, il ne faut pas attribuer de hauteur quand l'on mets 100% à la largeur le navigateur s'occupe de mettre la hauteur au bon format.
Cela peut donner ceci
cela devrait le faire, même si il n'y aura pas d'effet...
;O)
tu n'en était pas loin du tout, il ne faut pas attribuer de hauteur quand l'on mets 100% à la largeur le navigateur s'occupe de mettre la hauteur au bon format.
Cela peut donner ceci
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Image largeur 100%</title>
<style type="text/css">
html, body {
margin : 0px;
width : 100%;
height : 100%;
text-align : center;
font-family : Verdana;
}
h1 {
color :#ccccdd;
}
img {
width : 98%;
}
</style>
</head>
TITRE
</html>
cela devrait le faire, même si il n'y aura pas d'effet...
;O)
mageetlent
Messages postés
13
Date d'inscription
dimanche 16 novembre 2008
Statut
Membre
Dernière intervention
24 novembre 2010
24 nov. 2010 à 16:47
24 nov. 2010 à 16:47
Génial !!!!
Mille mercis, Petole Team !!!!
Les effets ne sont pas si intéressants sur de grandes images, ça met beaucoup de temps à se redimensionner.
Et puis ton code est ultra simple, super !!!!!
Bonne continuation !
Mage et Lent, un des trois
Mille mercis, Petole Team !!!!
Les effets ne sont pas si intéressants sur de grandes images, ça met beaucoup de temps à se redimensionner.
Et puis ton code est ultra simple, super !!!!!
Bonne continuation !
Mage et Lent, un des trois
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
17
25 nov. 2010 à 13:09
25 nov. 2010 à 13:09
Bonjour,
Et puis ton code est ultra simple, super !!!!!
on en était pas loin lors de ma première proposition, j'avais simplement zappé le comportement des navigateur en omettant de spécifier une hauteur
[i]Nota:
penses à mettre Réponse Acceptée !, cela peut en aider d'autres.
/i
;O)
Et puis ton code est ultra simple, super !!!!!
on en était pas loin lors de ma première proposition, j'avais simplement zappé le comportement des navigateur en omettant de spécifier une hauteur
[i]Nota:
penses à mettre Réponse Acceptée !, cela peut en aider d'autres.
/i
;O)
