28220 sujets

CSS et mise en forme, CSS3

Bonjour

Je suis en train de faire une page style gallerie photos, avec des vignettes alignées comme dans un tableau, mais à l'aide de <div> et d'une feuille css.
L'alignement est ok, mais j'arrive pas à dimentionner mes images. Elle sont un petit peu plus grandes que le bloc alors je voudrais les rappetisser la moindre. Voilà ce que j'ai :

Une classe pour le div "conteneur":
.photo_bloc {
	float: left;
	height: 146px;
	width: 146px;
	margin-top: 2px;
	margin-left: 2px;
	text-align: center;
}


Et une autre pour la photo:
.photo {
	width: 80%;
	height: 80%;
	border: 0px;
}


Et dans mon html :
<a href="../photos/photo_01.jpg')" class="photo_bloc">
<IMG src="../photos/t_photo_01.jpg" class="photo"></a>


Le problème, c'est que la photo est à 80% du conteneur, et non pas de sa taille d'origine. "C'est pas grave", me direz-vous, hé bien si, parce que j'ai des photo prises verticalement, et elles sont alors déformées! Et j'ai pas vraiment envie de faire une classe pour les photos verticales, et une pour les horizontales...

Si je mets seulement "width: 80%", alors les verticales dépassent du conteneur, et si je mets "width: 80%; height: 80%" alors toutes les photos deviennent carrées!

Donc ma question précise est :
Est-ce possible de définir dans ma feuille CSS une largeur d'image en % de la taille de l'image et non en % de la taille du conteneur???
Modifié par lebendre (21 Oct 2005 - 15:26)
Administrateur
Hello Lebendre et bienvenue ici Smiley smile

Attention à bien prendre en compte les Règles du forum (que tu as lues je suppose) en ce qui concerne l'affichage des codes dans les messages.
Il serait courtois de modifier ton premier message et d'appliquer ce que recommandent les règles.

Merci d'avance Smiley smile
Voilà voilà, c'est corrigé, désolé pour ce non-respect des règles, je ferai mieux la prochaine fois!!!
Je crois qu'il n'est pas conseillé de réduire les dimensions d'une images par css.
En effet le poids de l'image reste le même, tu peux donc charger une photo d'1 Mo et lui donner une dimension de 20x20 pixels... bref pas terrible.
Il vaut mieux redimensionner tes photos avec php.
Aguire a écrit :
Je crois qu'il n'est pas conseillé de réduire les dimensions d'une images par css.


C'est en effet une des bonnes pratiques qualité Web de base.