[Résolu] Image dans une div

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)