28221 sujets

CSS et mise en forme, CSS3

Images redimensionnables

bonjour à tous,

comme j'ai trouvé ça à l'occasion de mes essais divers, je vous l'indique.

si on écrit

html :


<body>
<img src="image.jpg" alt="comentaire alternatif" />
</body>


et css :

img {
width:25%;
height:auto;
}


------

et que par ailleurs on ait prévue une image de largeur réelle de 400px.

et bien on se retrouve avec un élément qui se redimensionne parfaitement dans toute les résolutions.

voilà.
Administrateur
clb56 a écrit :
et bien on se retrouve avec un élément qui se redimensionne parfaitement dans toute les résolutions.

Oui, l'unité de pourcentage est acceptée sur les images.
Cependant, le rendu est souvent très mauvais sur l'écran.

Dans le même ordre d'idée :
Faire un arrière-plan étirable
a écrit :
Cependant, le rendu est souvent très mauvais sur l'écran.


Ma foi sur les essais que j'ai pu faire celà reste tout à fait satisfaisant (vraiment):
test passage 1024*768 à 800*600 et divers redimensionnements de la fenêtre.

ce que je trouve surtout intéressant c'est le fait qu'étant choisie la place que va occuper une image dans l'écran il suffit d'exprimer cette place en % pour l'une des dimensions et de donner la valeur auto à l'autre pour que tout se passe simplement et sans déformation.

C'est aussi bien utile pour adapter la taille des images à différentes mises en page css d'un même document html.

sans compter que si on style

img {
height:100%;
width:auto;
}

que l'image d'origine fait 1600*1200px
et que l'on utilise F11 sur le clavier

alors on obtient, dans ttes les résolutions, une superbe photo fullscreen Smiley lol

ok je sors
Modifié le 02 Feb 2005 - 15:25
Armandopoulos a écrit :
il a y des Problemes sous Firefox, d´apres mes tests mais sous IE pas de problemes.

Merci bien


Quels problèmes ?

je n'en ais pour ma part rencontré aucun. En fait j'ai très exactement le même résultat avec IE geckos et opera.
Modifié le 03 Feb 2005 - 12:30
le probleme que j´ai rencntrer est celui du redimensionenemt de l image.
IE 6.0.2800 le fait sans probleme, egal la dimension de la fenetre il adapte l´image.

mais sous Firefox 0.93 que j utilise il ne le fait pas j ai trois Photo au centre mais ses phots se retrouvent tous au bas de la page au lieu d etre entre le menu gauche et droit.

je suis pas un specialiste peut etre je fais erreur quelque part. J aurai bien souhaite que mes images restes au milieu egal la dimension de la fenetre du navigateur.

voila la page: http://www.schunter.etc.tu-bs.de/~kom/
voila mon code css

body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color:black;
	margin: 15px;
	padding: 0;
	background-color: khaki;
}
.head1 {
        position: relative;
        background-image: url('design/head1.gif');
        width:  966px;
        height: 90px;
        padding-bottom: 0px;
       background-align: center;
}
.logo {
        float: center; /* alignement du logo à droite */
        margin-right: 10px;  /* placement du logo dans son conteneur, head1 */
        margin-top: 3px;
        border: 0;
}
.gauche {
        float:left;
	width:  18%;
        height: 100%;
	background-color: lightgreen;
	padding-bottom: 0px;
}
.droite {
        float:right;
	width:  18%;
        height: 750px;
	background-color: lightgreen;
	padding-bottom: 0px;
}
.centre {
	background-color: white;
	width:  97%;
        height: 100%;
	padding:5px;
	text-align : center;
<!--	margin-left: 20%; -->
}
.pied {
	position: absolute;
	width: 966px;
	left: 25%;
	margin-left:  0px;
	margin-right: 0px;

	background-color: lightskyblue;
	text-align : center;
	padding-top:10px;
	color : White;
	height : 20px;
}
.menu { /* on définit un conteneur pour le menu */

      margin-top: 30px;
      width:  180px;
      height: 815px;
      font-family: verdana, arial;
      font-size:180%;
      text-align: center;
}
.menuhaut {
float: rigt; /* on aligne le menu vertical à droite de son conteneur,head3 */
margin-right: 10px;
margin-top: 10px;
}
/* On en profite pour définir les balises de titres dans le CSS */
h1 {
      font-size: 290%;
      text-align: center;
      color: red;
}
h2 {
    font-size: 200%;
    text-align: center;
    color: cyan;
}
ul,li {
list-style-type: none; /* pour ne pas avoir de puces */
margin: 0;
padding:0;
line-height: 30px; /* interligne */
}
img {
     width:80%;
     height:auto;
    }




Merci bien
Bonjour Armandopoulos !

Si tu veux que quelqu'un s'intéresse à ton problème, je te suggère fortement d'ajouter un DOCTYPE à ton document, ainsi que de spécifier un encodage de caractères.

http://pompage.net/pompe/doctype/
http://blog-and-blues.org/weblog/2004/08/16/275-encodage-caracteres-xhtml

Et nondidju, vire moi ces <blink> qui datent du siècle dernier, vestiges de la guerre des navigateurs. Smiley nono 

[#red][b]<blink>[/b][/#] in Braunschweig Zentrum[#red][b]</blink>[/b][/#]

<blink> est sans aucun doute l'élément le plus ridicule à avoir été inventé.
Il ne fait nullement partie d'un langage "standard".

<edit />
Je viens de réaliser que tu postes ton problème dans le sujet créé par clb56, ce qui vient en parasite à ce dernier. Si tu as un problème, tu commences par Méthodologie à lire avant de poster dans ce salon ! Si ton problème persiste, là tu peux ouvrir ton propre sujet pour demander assistance. Tu peux aussi consulter la FAQ du forum.

Au passage, un <p> ne peux contenir d'éléments de type "block" comme par exemple <h1> :

<p>[#red][b]<h1>[/b][/#] <blink>in Braunschweig Zentrum</blink>[#red][b]</h1>[/b][/#]</p>

http://htmlhelp.com/reference/html40/block/p.html

--
Modifié le 04 Feb 2005 - 08:01
salut Stephan,

merci bien pour tes remarques, je sais maintenant la demarche a suivre en fait c est en recherchant sur google comment redimensionner les images que je suis tomber dans le sujet créé par clb56.

Je m excuse et prochainement je sais la demarche a suivre.

Merci
Une petite découverte supplémentaire, médiocrement intéressante car la propriété ne semble pas comprise par IE.

dans l'exemple que j'avais donné en début de post le style devait s'appliquer à des images dont la taille réelle devait être supérieure ou égale au 1/4 de la résolution du point de vue de la largeur. Si une image est plus petite elle sera alors agrandie au dessus de sa taille réelle.

On peut régler ça par :

CSS

img {
max-width:25%;
height:auto;
}


celà fonctionne avec firefox et opera c'est déjà ça Smiley smile

++
Sujet clos
Aller à