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

Question

Si j'utilise ce code, l'image n'est pas coupée par les coins arrondis de la division (ce qui fait que les coins carrés de l'image recouvrent les coins arrondis de la division) :

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

Quelqu'un sait-il comment obtenir un div de bordure arrondi pour empêcher une image enfant de déborder ?

Answer 1

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

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

Dans Firefox 15, l'image est coupée lorsque le conteneur a été modifié. {overflow: hidden} . (La coupure du contenu enfantin semble avoir été ajouté dans Gecko 2.0. )

Dans Chrome 23 et Safari 5, l'image est coupée. uniquement lorsque le conteneur a {position: static; overflow: hidden} et l'image a {position: static} .

Answer 2

Cela peut ou non fonctionner dans votre cas, mais envisagez de faire de l'image un arrière-plan CSS. Dans FF3, ce qui suit fonctionne 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 y ait une autre solution - si vous appliquez une bordure à l'image elle-même (disons, 1em profond), vous obtenez le même problème de coins carrés.

Editar: bien que, dans le cas de l'"ajout d'une bordure à l'image", l'insertion de l'image soit correcte, c'est juste que l'image n'est pas au même niveau que l'écran. div élément. Pour vérifier les résultats, ajoutez style="border:1em solid black;border-radius:1em;-moz-border-radius:1em;" à la img (avec width y height régler de manière appropriée, si nécessaire).

Answer 3

Même lorsque overflow est réglé sur hidden , border-radius ne coupe pas son contenu. T

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

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

Une autre façon serait de définir l'image comme arrière-plan du conteneur en utilisant background-image mais cette méthode pose des problèmes dans les versions de Firefox antérieures à la version 3 (cf. ce bug ) - non pas que cela doive vous déranger outre mesure.

Answer 4

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

Essayez cette solution de contournement :

1. L'image dans img est présente et vous y définissez la largeur et la hauteur.
2. Puis le cacher avec visibility:hidden . La largeur et la hauteur restent intactes.

3. Après cela, vous définirez la même source comme image de fond 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;}