web-dev-qa-db-fra.com

Comment empêcher une image de déborder d'une boîte à coins arrondis?

Si j'utilise ce code, l'image n'est pas coupée par les coins arrondis de la div (les coins carrés de l'image recouvrant ceux de la div):

<div style="border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em; overflow:hidden;">
    <img src="big-image.jpg" />
</div>

Est-ce que quelqu'un sait comment obtenir une div en corde arrondie pour empêcher une image d'enfant de déborder?

htmlcsscss3
32
Bret Walker

Cela peut ou non fonctionner dans votre situation, mais envisagez de faire de l'image un arrière-plan CSS. En FF3, ce qui suit fonctionne très bien:

 <div style = "
 image-fond: url (big-image.jpg); 
 border-radius: 1em; 
 hauteur: 100px; 
 -moz-border-radius: 1em; 
 Width: 100px; "
> </ Div>

Je ne suis pas sûr qu'il existe une autre solution de contournement du problème: si vous appliquez une bordure à l'image elle-même (par exemple, 1em profond), vous obtenez le même problème de coins carrés.

Édition: bien que, dans le cas "ajout d'une bordure à l'image", l'encart d'image soit correct, c'est simplement que l'image n'est pas alignée avec l'élément div. Pour consulter les résultats, ajoutez style="border:1em solid black;border-radius:1em;-moz-border-radius:1em;" à la balise img (avec width et height correctement définis, si nécessaire).

11
kyle

Mes derniers Chrome, Firefox et Safari coupent l'image dans le rayon de la bordure du conteneur (comme prévu).

http://jsfiddle.net/RQYnA/12/embedded/result/

Dans Firefox 15, je vois l’image tronquée lorsque le conteneur a {overflow: hidden}. (Le découpage du contenu enfant semble avoir été ajouté dans Gecko 2.0. )

Dans Chrome 23 & Safari 5, je vois l'image tronquée uniquement lorsque le conteneur a {position: static; overflow: hidden} et que l'image a {position: static}.

24
sam

Même lorsque overflow est défini sur hidden, border-radius ne coupe pas son contenu. C'est par conception.

Une solution serait de définir border-radius sur l'image ainsi que son conteneur.

<div style="border-radius: 16px; ...">
    <img src="big-image.jpg" style="border-radius: 16px; ..." />
</div>

Une autre solution consiste à définir l'image en tant qu'arrière-plan du conteneur à l'aide de background-image; mais il y a des problèmes avec cette méthode dans Firefox avant la version 3 (voir ce bogue ) - pas que cela doive trop vous déranger.

3
Alex Barrett

Il y a aussi maintenant background-clip en css3. Cela fonctionne dans tous les principaux navigateurs. Les options sont border-box, padding-box et content-box. Dans votre cas, je pense que vous voudrez utiliser padding-box.

-webkit-background-clip: padding-box;
-moz-background-clip:    padding; 
background-clip:         padding-box;
1
thomasrye

Essayez cette solution de contournement:

  1. L'image dans la balise img est présente et vous définissez la largeur et la hauteur.
  2. Puis cachez-le avec visibility:hidden. La largeur et la hauteur restent intactes.
  3. Ensuite, vous définissez la même source que l’image d’arrière-plan et elle sera coupée.

<a class="thumb" href="#" style="background-image: url('./img/pic1.jpg');" title="Picture">
  <img border="0" src="./img/pic1.jpg" alt="Pic" height="100" width="150" />
</a>

#page .thumb {
background-repeat: no-repeat;
background-position: left top;
border: 3px #e5dacf solid;
display: block;
float: left;}

#page .thumb img {
display: block;
visibility: hidden;}
1
Gabox

Si vous faites de l'image une image d'arrière-plan au lieu d'un contenu, l'image ne coupe pas les coins arrondis (au moins dans FF3).

Vous pouvez également ajouter un remplissage à la div ou une marge à l’image pour ajouter un remplissage supplémentaire entre la bordure arrondie et l’image.

0
Illandril

Je pense que ce problème se produit lorsque l'image ou le parent de l'image est en position: absolue. Cela est compréhensible dans la mesure où la définition de absolute prend l'élément hors du flux du document.

Je suis sûr à 90% que j'ai vu un correctif pour cela, je mettrai à jour ce post quand je le ferai: D

0
Brad

Un simple border-radius sur la balise img fonctionne parfaitement dans les versions actuelles de Safari 5, Chrome 16, Firefox 9:

<div>
    <img src="big-image.jpg" style="border-radius: 1em;" />
</div>
0
Nick

Le recadrage supplémentaire est généralement uniquement dans la marge d'erreur de l'épaisseur de la bordure. Laissez simplement le rayon intérieur légèrement plus petit pour que la marge d'erreur se situe sous la bordure au lieu de

<div style='border-radius:5px;border:thin solid 1px;'>
   <img style='border-radius:4px' />
</div>
0
Matt Cook