Image ronde dans boite ronde. HTML5. CSS3.

Bonjour à tous,

Je sais créer une boite ronde avec border-radius et j'aimerais que dans cette boite ronde vienne s'incruster une image initialement de taille quelconque.

Mais je ne parviens à rien d'autre qu'une image carrée qui déborde de ma boîte.
Si vous avez un moyen
Merci
Phil

Bonsoir,

Tu peux éventuellement affubler les propriétés de ta boîte directement à la balise img (ou à une classe si besoin) :

img{
  border-radius :50%;
  border:4px solid gray;
  padding:20px;
}

Tu as deux solutions :
- Soit comme proposé au dessus tu appliques tes propriétés radius et border directement à ton image
- Soit tu les appliques sur ta boîte autour, tu mets ton image en 100% dedans, et pour pas qu'elle ne dépasse tu dois appliquer à ta boîte un overflow: hidden;

Bonjour Phil,

Il y a un moyen très simple d'appliquer à ton image les mêmes valeurs de largeur et de hauteur que son conteneur : la valeur "inherit".

Exemple :

div {
  display: inline-block;
  border: 2px dotted orange;
  width: 250px;
  height: 250px;
  border-radius: 50%;
}
img {
  width: inherit;
  height: inherit;
  border-radius: inherit;
}

résultat en ligne : http://codepen.io/raphaelgoetter/pen/bVvLbN

Bonne journée

je n'ai jamais utilisé inherit, c'est vraiment pratique ! merci

Terrible le inherit ! Merci !

Merci à tous pour ces réponses toutes valables. JE les ai testées !
Mais est-il possible avec inherit de déplacer relativement chaque bloc image si j'en mets 4 en lignes

ai tenté

<p id="id1"><img src=methanol.gif alt="" /></p>
	<p id="id2"><img src=methanol.gif alt="" /></p>
	<p id="id3"><img src=1.gif alt="" /></p>
	<p id="id4"><img src=1.gif alt="" /></p>

et

p {
  display: inline-block;
   border: 2px dotted orange;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
 img {
  width: inherit;
  height: inherit;
  border-radius: inherit;
}
#id2
{position:relative;top:100px;}

et d'autres mais sans succès
Modifié par phil76620 (27 Oct 2015 - 12:32)