taille d'image

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : taille d'image

made37

Bonjour, je fait un site wbe et je voulais qu emes image soit visible sur tout la page qque soit la resoltuin , c'est a dire sans les redimensionner avant a une taille type.

Merci

Publicité

plainsofpain

Pingouino's lover

Tu appelles les soeurs haliwell, sinon en les redimmensionnant tu as la solution PHP/GD, mais faut que ton hébergeur le propose.

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be

Beral2

Si tu redimensionnes ton image "dynamiquement" en fonction de la définition de l'écran du visiteur, saches que ton image sera de mauvaise qualité.
Il vaut mieux, ou prendre un motif qui boucle (sans que cela ne se voit trop), ou mettre ton image une seule fois avec ses bords qui partent en fondu vers la couleur de background choisie.
C'est mon avis.

Message édité par Beral2 le 08-07-2005 à 15:35:48

made37

Et bien j'ai trouvé avec une image "elastique" sur internet
ça marche pas mal pour mes fotos.

Beral2 c koi tonidée de motif qui boucle ?

Merci

Beral2

Une "vraie" texture, du genre granulé, sable, paille, pierre... le tout très léger, peu contrasté et clair pour ne pas amoindrir la lisibilité du contenu (qui reste l'essentiel).

Pour le bouclage, utilise le filtre Photoshop Other/offset "Wrap around" puis le tampon. Ce "filtre" qui est plutôt un décalage de l'image doit certainement exister dans d'autres logiciels.

made37

Beral2 a écrit :

Oui c'est vrai ca peut etre plus joli une texture vrai. as tu des examples de sites ?

Mais je voudrais que les images de ma page soit ajustées en taille en fonction de la résolution de l'écran ! j'arrive à la faire avec une photo seul (via le style #photo
{ width: 100%;
height: auto;}
mais j'arrive pas a faire cela avec la page que j'ai faite ci-desous.

Alors a votre bon coeur
MErci
MaDe

code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<title>Avion ...</title>

<style type="text/css">
#scrollbox {width:100px; height:100px; margin-left:18px; background:#ffe; overflow:auto; border:1px solid #aaa;}
a.gallery, a.gallery:visited {display:block; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:47px; margin:2px; float:left;}
a.slidea {background:url(thumb/t_PICT0008.jpg);}
a.slideb {background:url(thumb/t_PICT0009.jpg) ;}
a.slidec {background:url(thumb/t_PICT0010.jpg) ;}

.slidek {display:block; position:absolute; width:400px; height:250px; top:44px; left:18px; padding:0; border:1px solid #000;}
a.gallery span {display:block; position:absolute; left:150px; top:-1px; width:1px; height:1px; overflow:hidden; background:#efedec;}
a.gallery:hover {white-space:normal; border:1px solid #fff;}
a.gallery:hover img, a.gallery:active img, a.gallery:focus img {border:1px solid #000;}
a.gallery:hover span, a.gallery:active span, a.gallery:focus span {display:block ; position:absolute; width=675; height:506px; top:75px; left:240px; padding:20px; font-style:italic; color:#000; background:#fff;}

#thumbs {width:169; height:40px;}

#photo
{ width: 100%;
height: 100%;
}
#photo1
{ width: 100;
height: 75;
}

</style>
</head>

<body bgcolor="#000000" text="#FFFFFF" link="#A1A5A9" vlink="#A1A5A9" alink="#666666">
<table border="0" width="95%" cellspacing="1" >
<tr>
<td width="40%" valign="middle" height="30" ><h1 align="center">Avion</h1></td>
<td width="60%" valign="middle" align="right"><INPUT TYPE="submit" VALUE="Page prédédente" onclick='history.go(-1)'></td>

</tr>
</table>
<div align="left">
<table border="4" bordercolor="#FFFFFF" cellpadding="2" height="464" width="187">
<tr>
<td width="169" align="center" height="456"><div id="thumbs">
<a class="gallery slidea" href="#nogo" title="Avion" id="photo1"><span><img src="original/PICT0008.jpg" alt="Avion" title="Avion" id="photo"/><br />Avion<br />MaDe</span></a>
<a class="gallery slideb" href="#nogo" title="Avion 2" id="photo1"><span><img src="original/PICT0009.jpg" alt="Avion " title="Avion " id="photo"/><br />Avion <br />MaDe</span></a>
<a class="gallery slidec" href="#nogo" title="Avion 2" id="photo1"><span><img src="original/PICT0010.jpg" alt="Avion " title="Avion " id="photo"/><br />Avion <br />MaDe</span></a>

</div>
</td>
</tr>
</table>

</div>

</body>
</html>

plainsofpain

Pingouino's lover

Les gens comprendront-ils un jour l'avantage d'user et d'abuser de [code ][ /code] ?

On se le demande ...

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be

made37

ca change koi ? au pb ?

bl@p_psx

Admin G15-france

ca rend le bordel lissible ...

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Avion ...</title>
<style type="text/css">
#scrollbox {width:100px; height:100px; margin-left:18px; background:#ffe; overflow:auto; border:1px solid #aaa;}
a.gallery, a.gallery:visited {display:block; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:47px; margin:2px; float:left;}
a.slidea {background:url(thumb/t_PICT0008.jpg);}
a.slideb {background:url(thumb/t_PICT0009.jpg) ;}
a.slidec {background:url(thumb/t_PICT0010.jpg) ;}
.slidek {display:block; position:absolute; width:400px; height:250px; top:44px; left:18px; padding:0; border:1px solid #000;}
a.gallery span {display:block; position:absolute; left:150px; top:-1px; width:1px; height:1px; overflow:hidden; background:#efedec;}
a.gallery:hover {white-space:normal; border:1px solid #fff;}
a.gallery:hover img, a.gallery:active img, a.gallery:focus img {border:1px solid #000;}
a.gallery:hover span, a.gallery:active span, a.gallery:focus span {display:block ; position:absolute; width=675; height:506px; top:75px; left:240px; padding:20px; font-style:italic; color:#000; background:#fff;}
#thumbs {width:169; height:40px;}
#photo
{ width: 100%;
height: 100%;
}
#photo1
{ width: 100;
height: 75;
}
</style>
</head>
<body bgcolor="#000000" text="#FFFFFF" link="#A1A5A9" vlink="#A1A5A9" alink="#666666">
<table border="0" width="95%" cellspacing="1" >
<tr>
<td width="40%" valign="middle" height="30" ><h1 align="center">Avion</h1></td>
<td width="60%" valign="middle" align="right"><INPUT TYPE="submit" VALUE="Page prédédente" onclick='history.go(-1)'></td>
</tr>
</table>
<div align="left">
<table border="4" bordercolor="#FFFFFF" cellpadding="2" height="464" width="187">
<tr>
<td width="169" align="center" height="456"><div id="thumbs">
<a class="gallery slidea" href="#nogo" title="Avion" id="photo1"><span><img src="original/PICT0008.jpg" alt="Avion" title="Avion" id="photo"/><br />Avion<br />MaDe</span></a>
<a class="gallery slideb" href="#nogo" title="Avion 2" id="photo1"><span><img src="original/PICT0009.jpg" alt="Avion " title="Avion " id="photo"/><br />Avion <br />MaDe</span></a>
<a class="gallery slidec" href="#nogo" title="Avion 2" id="photo1"><span><img src="original/PICT0010.jpg" alt="Avion " title="Avion " id="photo"/><br />Avion <br />MaDe</span></a>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>

made37

oui c vrai c un peu plus lisible, enfin j'ai toujours pas trouvé ma solution, et comme je suis nul c pas gagné

Publicité

FlorentG

Le code HTML est complètement érroné :

attribut xmlns et xml:lang sur l'élément html, alors que la DTD est de type HTML4
attribut lang sur html qui indique une langue anglaise, alors que y'a du français partout
css dans l'html -> à mettre dans fichier séparé
attribut n'existant plus sur body : bgcolor, text, etc... Ca sert à quoi d'utiliser du CSS si c'est pour mettre des machins obsolètes ?
tableau de mise en page
Lien vers page précédente ultra-douteux (basé sur JS, pas bien)
Attributs obsolètes sur div et table (align, bordercolor). Pareil, CSS CSS CSS
img avec id pareil (photo1) : un id doit être unique sur tout le document, on ne peut pas avoir plusieurs éléments avec un même id

Donc corrige déjà tout ça, allège un peu la structure, et après on verra

made37

oula trop cho pour moi, je crois je vais lacher l'affaire. et faire un truc plutot basique

FORUM HardWare.fr

Programmation

HTML/CSS

taille d'image

Sujets relatifs
Inserer une image HTML qui ne doit pas dépasser une certaine taille...	[javascript] Taille d'une image
[Javascript] Ouvrir une image dans une popup de même taille	Taille d'une image
Taille de l'Image en Gardant Proportions	taille d'une image
Taille Image	[prog simple] Petit prog pour changer auto la taille d'une image
taille d'image pour fonction PHP
Plus de sujets relatifs à : taille d'image

Page générée en 0.055 secondes