Wie verhindere ich, dass ein Bild mit CSS3 über eine Box mit abgerundeten Ecken überläuft?

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> 

Weiß jemand, wie ein abgerundetes Corder zu erhalten div, um zu verhindern, dass ein Kindbild überläuft?

Answer 1

Dies kann oder kann nicht in Ihrer Situation funktionieren, aber in Betracht ziehen, das Bild einen CSS-Hintergrund zu machen. In FF3, die folgende funktioniert 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, es gibt eine andere Abhilfe —, wenn Sie eine Grenze zu dem Bild selbst (etwa 1em tief) anwenden, können Sie das gleiche Problem der quadratischen Ecken bekommen.

Edit: obwohl in dem „Hinzufügen einer Grenze zu dem Bild“ Fall das Bild Einsatz ist richtig, es ist nur, dass das Bild mit dem div Elemente nicht bündig ist. Um die Ergebnisse auszuwerten, fügen Sie style="border:1em solid black;border-radius:1em;-moz-border-radius:1em;" zum Tag img hinzu (mit width und height, falls erforderlich, entsprechend einstellen).

Answer 2

Wenn Sie das Bild anstelle des Inhalts als Hintergrundbild erstellen, werden die abgerundeten Ecken nicht abgeschnitten (zumindest in FF3).

Sie könnten dem div oder dem Rand auch ein Padding hinzufügen, damit das Bild zwischen dem abgerundeten Rand und dem Bild eine zusätzliche Füllung erhält.

Answer 3

Sie benötigen eine genaue Breite und Höhe mit Überlauf zu spezifizieren: versteckt, wenn Sie Ihre div Ihr Bild

Answer 4

Auch Clip soll, wenn overflow-hidden gesetzt ist, border-radius nicht ihren Inhalt Clip. Das ist Absicht.

Eine Lösung wäre, border-radius auf das Bild sowie seinen Container zu setzen.

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

Ein anderer Weg, um das Bild als Hintergrund des Behälters background-image mit setzen wäre; Aber es gibt Probleme mit dieser Methode in Firefox vor Version 3 (siehe this bug) - nicht, dass Sie sich zu sehr stören müssen.

Answer 5

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 es mit visibility:hidden. Die Breite und Höhe bleiben erhalten.
3. Danach werden Sie die gleiche Quelle als Hintergrundbild festlegen und 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 6

Meine neueste Chrome, Firefox und Safari Clip das Bild an den Grenzradius 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 Inhalts scheint added in Gecko 2.0. gewesen zu sein)

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

Answer 7

Ein einfaches border-radius auf den img Tag arbeitet in aktuellen Versionen von Safari feine 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 Bildposition ist: absolut. Dies ist verständlich, da die absolute Einstellung das Element aus dem Fluss des Dokuments entfernt.

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

Es gibt auch jetzt background-clip in css3. Es funktioniert in allen gängigen Browsern. Die Optionen sind border-box, padding-box und content-box. In deinem Fall denke ich, dass du die padding-box benutzen willst.

Answer 10

Das zusätzliche Zuschneiden erfolgt normalerweise nur innerhalb der Fehlermarge der Randstärke. Lassen Sie einfach der innere Radius etwas kleiner sein, so dass die Fehlerquote unter der Grenze statt nächsten fällt

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