Comment empêcher une image de déborder d'une boîte de coin arrondie avec CSS3?

Question

Si j'utilise ce code, l'image ne sera pas rogné par les coins div arrondis de (résultant dans les coins carrés d'image couvrant jusqu'à Ones arrondis du 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 un Corder arrondi div pour empêcher une image enfant de déborder?

Answer 1

Cela peut fonctionner ou ne pas fonctionner dans votre situation, mais envisagez de faire de l'image un arrière-plan CSS. Dans FF3, les travaux suivants très bien:

 
<div style=" 
    background-image: url(big-image.jpg); 
    border-radius:  1em; 
    height:    100px; 
    -moz-border-radius: 1em; 
    width:    100px;" 
></div> 

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

Edit: bien que, dans le « ajoutant une bordure à l'image » cas, l'encart d'image est correcte, il est juste que l'image ne soit pas au ras de l'élément div. Pour vérifier les résultats, ajoutez style="border:1em solid black;border-radius:1em;-moz-border-radius:1em;" à l'étiquette img (avec width et height paramétrée de manière appropriée, si nécessaire).

Answer 2

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

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

Answer 3

Vous devez spécifier une largeur et hauteur exacte avec overflow: hidden, si vous voulez que votre div à clipser votre image

Answer 4

Même lorsque overflow est réglé sur hidden, border-radius ne pas clippée son contenu. C'est par conception.

Une solution consisterait à 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> 

Un autre moyen serait de définir l'image comme le fond du récipient en utilisant background-image; mais il existe des problèmes avec cette méthode dans Firefox avant la version 3 (voir this bug) - pas que cela vous dérange trop.

Answer 5

Essayez cette solution de contournement:

1. L'image dans la balise img est présent et il vous définissez la largeur et la hauteur. Puis cachez-le avec visibility:hidden. La largeur et la hauteur restent intactes. Ensuite, vous définirez la même source que l'image de fond et l'écrêtera.

<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;} 

Answer 6

Mon dernier Chrome, Firefox et Safari découper l'image à rayon de la bordure du conteneur (comme prévu).

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

Dans Firefox 15, je vois l'image écrêté lorsque le conteneur a {overflow: hidden}. (Clipping du contenu des enfants semble avoir été added in Gecko 2.0.)

Je vois dans Chrome 23 & Safari 5, l'image écrêté que lorsque le conteneur a {position: static; overflow: hidden} et l'image a {position: static}.

Answer 7

Une border-radius simple sur l'étiquette img fonctionne très bien dans les versions actuelles de Safari 5, Chrome 16, Firefox 9:

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

Answer 8

Je pense que ce problème se produit lorsque l'image ou le parent de l'image est la position: absolute. Cela est compréhensible car la définition de l'absolu éloigne l'élément du flux du document.

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

Answer 9

Il y a aussi maintenant background-clip dans 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; 

Answer 10

Le recadrage supplémentaire est habituellement seulement dans la marge d'erreur de l'épaisseur de la bordure. Il suffit de laisser le rayon intérieur soit légèrement plus petit de sorte que la marge d'erreur relève de la frontière au lieu de côté est

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