Wie verhindere ich, um ein Bild von einer abgerundeten Ecke Box überfüllt?

Question

Wenn ich diesen Code verwenden, wird das Bild nicht durch die div abgeschnitten Ecken abgerundet (was in der rechtwinkligen Ecken des Bildes der divs abgerundet diejenigen Verschleierung):

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

Wer weiß, wie ein abgerundetes Corder div bekommt ein Kind Bild von überquell zu verhindern?

Answer 1

Dies kann oder kann nicht in Ihrer Situation funktionieren, aber betrachtet das Bild einen CSS-Hintergrund zu machen. In FF3 funktioniert die folgende ganz gut:

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

Ich bin nicht sicher, ob eine andere Problemumgehung gibt es - wenn Sie eine Grenze zu dem Bild selbst (etwa 1em tief) anwenden, können Sie das gleiche Problem der quadratischen Ecken bekommen

.

Edit: , obwohl im Fall „eine Grenze zu dem Bild hinzugefügt“, das Bild Einsatz richtig ist, es ist nur, dass das Bild nicht bündig mit dem div Elemente ist. Um die Ergebnisse zu überprüfen, fügen style="border:1em solid black;border-radius:1em;-moz-border-radius:1em;" zum img-Tag (mit width und height entsprechend gesetzt, falls erforderlich).

Answer 2

Mein neuestes Chrome, Firefox und Safari das Bild Clip auf den border-radius des Behälters (wie beabsichtigt).

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

In Firefox 15, sehe ich das Bild abgeschnitten, wenn der Behälter {overflow: hidden} hat. (Clipping der Kinder Inhalt scheint hinzugefügt in Gecko 2.0. )

In Chrome 23 und Safari 5, sehe ich das Bild abgeschnitten nur , wenn der Behälter hat {position: static; overflow: hidden} und das Bild hat {position: static}.

Answer 3

Auch wenn overflow eingestellt ist hidden, wird border-radius nicht ihren Inhalt Clip. Das ist von Entwurf.

Eine Lösung wäre border-radius auf dem Bild zu setzen sowie seinen Behälter.

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

Eine andere Möglichkeit wäre, das Bild als Hintergrund des Behälters zu setzen mit background-image; aber es gibt Probleme mit dieser Methode in Firefox vor Version 3 (siehe dieser Fehler ) - nicht, dass die Notwendigkeit, stört Sie zu viel

.

Answer 4

Versuchen Sie diese Abhilfe:

1. Das Bild in img Tag vorhanden ist und dort legen Sie die Breite und Höhe.
2. Dann verstecken sie mit visibility:hidden. Die Breite und Höhe bleiben intakt.
3. Danach werden Sie die gleiche Quelle als Hintergrundbild gesetzt ein es wird abgeschnitten.

<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 5

Es gibt auch jetzt background-clip in css3. Es funktioniert in allen gängigen Browsern. Die Optionen sind border-Box, padding-Box und Inhalt-Box. In Ihrem Fall, ich glaube, Sie werden padding-Box verwenden möchten.

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

Answer 6

Wenn Sie das Bild ein Hintergrundbild machen statt der Inhalte, das Bild wird die abgerundeten Ecken nicht Clip (zumindest in FF3).

Sie können auch eine Polsterung an den div oder Marge für das Bild, fügen Sie zusätzliche Polsterung zwischen dem abgerundeten Rand und dem Bild hinzuzufügen.

Answer 7

Ein einfaches border-radius auf dem img Tag funktioniert gut in der aktuellen Versionen von Safari 5, Chrome 16, Firefox 9:

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

Answer 8

Ich denke, das Problem tritt auf, wenn das Bild oder die Eltern Bild ist position: absolute. Dies ist verständlich, da absolute Einstellung das Element aus dem Fluss des Dokuments nimmt.

Ich bin 90% sicher, dass ich eine Lösung für diese gesehen habe, werde ich diesen Beitrag aktualisieren, wenn ich tun: D

Answer 9

Das zusätzliche Zuschneiden ist in der Regel nur innerhalb der Fehlermarge der Randstärke. Lassen Sie einfach der innere Radius etwas kleiner sein, so dass die Fehlerquote unter der Grenze fällt statt neben wird

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

Answer 10

Sie müssen eine genaue Breite und Höhe mit Überlauf spezifizieren: versteckt, wenn Sie möchten, dass Ihre div Ihr Bild clip