Comment puis-je empêcher une image de déborder une zone de coin arrondi?

StackOverflow https://stackoverflow.com/questions/587814

  •  06-09-2019
  •  | 
  •  

Question

Si j'utilise ce code, l'image ne sera pas rogné par les coins arrondis (div de résultat la coins carrés d'image couvrant jusqu'à Ones arrondis de la div): 

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

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

Était-ce utile?

La solution

Cela peut ou peut ne pas fonctionner dans votre situation, mais envisager de faire l'image d'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 - si vous appliquez une bordure à l'image elle-même (par exemple, 1em profonde), vous obtenez le même problème de coins carrés

.

Modifier , 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;" à la balise img (avec width et height correctement réglés, le cas échéant).

Autres conseils

Mon dernier Chrome, Firefox et Safari à découper l'image border-radius 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é ajouté dans Gecko 2.0. )

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

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

Une solution serait de mettre border-radius sur l'image ainsi que son contenant. 

<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 fond du récipient en utilisant background-image; mais il y a des problèmes avec cette méthode dans Firefox avant la version 3 (voir ce bug ) - pas que ce besoin vous dérange pas trop

.

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.
  2. cacher ensuite avec visibility:hidden. La largeur et la hauteur restent intactes.
  3. Une fois que vous définissez la même source que l'image d'arrière-plan un il sera rogné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;}

Il y a aussi maintenant background-clip dans CSS3. Il fonctionne dans tous les principaux navigateurs. Les options sont border-box, boîte de remplissage et boîte de contenu. Dans votre cas, je pense que vous aurez envie d'utiliser la boîte de remplissage. 

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

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

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

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>

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 que la mise en absolu prend l'élément hors 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

La culture supplémentaire est généralement 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>

Vous devez spécifier une largeur exacte et hauteur avec trop-plein: caché, si vous voulez que votre div à clipser votre image

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top