[Résolu] Image dans une div

bonjour à tous,
je suis débutant en css depuis quelques jours. J'essaye d'afficher une image dans une div.

.vignettesmileys 
{
border-width:2px;
border-color:red;
margin-right:8px;
margin-bottom:8px;
border-radius: 25px;	
width:100px;
height:100px;
background-color:white;
float:left;
display:block;
}

.vignettesmileys img { 
max-height: 100%;
max-width: 100%;
display:block;
}

<div class='vignettesmileys'><a href=''><img class ='vignettesmileys' src='' alt='' border=''></a></div>";

Mon problème est que mes images sont de différentes tailles et qu'elles sont etirées dans ma div. Est il possible d'afficher les images inférieur à la div sans étirer et les images supérieur à la div sans elargir ma div ?

bien à vous ,
bypbop
Modifié par bypbop (28 Dec 2018 - 00:21)

Bonjour,

Le premier problème, c'est que tu as donné le même nom de classe à l'image et au div qui l'entoure. Du coup, c'est la panique à bord. Il faut retirer l'attribut class de la balise image, il ne sert à rien puisque dans le css, tu sélectionnes les images via un .vignettesmileys img ce qui est très bien ici. Je retirerais aussi le border="" de la balise image : si tu dois faire quelque chose sur le border de l'image, fais le dans le css en mettant un border:0;

Du coup, le html devient :

<div class='vignettesmileys'><a href=''><img src='myImg.jpg' alt=''></a></div>

Ensuite, pour le css, y a plein de possibilités.

Déjà, il faut voir que l'image est encadrée par une balise <a>. On doit en tenir compte.

Le border rouge de .vignettesmileys ne peut pas fonctionné. Il lui manque quelque chose. J'ai corrigé ça.

Le display:block pour .vignettesmileys est inutile, car la vignette étant une balise <div>, elle a déjà par défaut un display qui vaut block.

Il ne me semble pas nécessaire de mettre un display:block à l'image elle-même, mais bon, ça peut se discuter (ça dépend aussi du display qu'on met à la balise <a>).

Pour la balise <a>, on peut l'utiliser pour centrer l'image horizontalement et verticalement (y a plusieurs méthodes, j'en ai choisi une au hasard).

Voici donc une possibilité (si j'ai bien compris la question, ce dont je ne suis pas tout à fait sûr) :

.vignettesmileys  {
	border:2px solid red;
	margin-right:8px;
	margin-bottom:8px;
	border-radius:25px;
	width:100px;
	height:100px;
	background-color:white;
	float:left;
	overflow:hidden;
}
.vignettesmileys a {
	width:100px;
	height:100px;
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}
.vignettesmileys img {
	max-width:100%;
	max-height:100%;
	border:0;
}

EDIT: il manquait un overflow:hidden nécessaire du fait de la présence de bords arrondis. Je viens de le rajouter.

Amicalement,
Modifié par parsimonhi (28 Dec 2018 - 03:30)

Un grand merci c'est tout à fait ce que je voulais obtenir ....
Cordialement,
bypbop
Modifié par bypbop (28 Dec 2018 - 15:22)