如何防止圖像溢出CSS3的圓角框？

如果我使用此代碼，圖像不通過的圓角（導致圖像的方角掩蓋div的四捨五入的）股利剪短如何防止圖像溢出CSS3的圓角框？

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

有誰知道如何獲得一個圓形科德div防止孩子圖像溢出？

來源

2009-02-25 Bret Walker

角落剪輯圖像按預期在我的最新的Chrome，Firefox和Safari現在：HTTP：// codepen .io/anon/pen/gzDmL – sam 2013-04-29 21:52:21

這可能會或可能不會在您的情況下工作，但考慮使圖像成爲CSS背景。在FF3，下面的作品就好了：

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

我不知道還有另一種解決辦法—如果應用邊框圖像本身（比如，1em深），你方角的同樣的問題。

編輯：儘管在「向圖像添加邊框」的情況下，圖像插入是正確的，只是圖像不與div元素齊平。要檢查結果，請將style="border:1em solid black;border-radius:1em;-moz-border-radius:1em;"添加到img標記（如果需要，可以適當設置width和height）。

來源

2009-02-25 21:08:26 kyle

是的，它看起來像這樣。這是不幸的溢出不起作用，因爲它與非邊界半徑風格的div。 – 2009-02-26 14:02:42

不幸的是，它不適用於webkit：/ – seler 2011-08-18 23:03:32

與背景圖像和邊框（特別是非透明邊框）相關： MDN： https://developer.mozilla.org/en-US/docs/CSS/background-clip其中注意到：「Internet Explorer 7，但不是其他版本的Internet Explorer，行爲如background-clip：padding如果overflow：hidden | auto | scroll。」 w3c CSS背景和邊框候選推薦規範（http://www.w3.org/TR/css3-background/#the-background-clip）。 – mwolfetech 2012-08-21 14:09:45

如果您將圖片設爲背景圖片而不是內容，則圖片不會剪裁圓角（至少在FF3中）。

您還可以在div上添加填充或爲圖像添加邊距以在圓角邊框和圖像之間添加額外填充。

來源

2009-02-25 21:12:45 Illandril

-1

您需要指定一個確切的寬度和heigth用溢出：隱藏，如果你希望你的div切圖像

來源

2009-02-25 22:03:35

即使overflow設置爲hidden，border-radius不夾的內容。這是設計。

一個解決方案是將border-radius設置爲圖像及其容器。

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

另一種方法是將圖像設置爲使用background-image的容器背景;但在版本3之前的Firefox中，這種方法存在問題（請參閱this bug） - 不是那種需要打擾您太多的問題。

來源

2009-02-26 00:29:02

嘗試以下解決方法：

在img標記的圖片是存在並且您設置的寬度和高度。
然後用visibility:hidden隱藏它。寬度和高度保持不變。
之後，您將設置相同的來源作爲剪輯的背景圖片。

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

來源

2010-12-11 20:14:59 Gabox

我最新的Chrome，Firefox和Safari上裁剪圖像到容器的邊界半徑（如預期）。

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

在Firefox 15，我看到當容器具有{overflow: hidden}圖像裁剪。（子內容的裁剪似乎已經added in Gecko 2.0.）

在Chrome中23 & Safari 5的，我看到的圖像切僅當容器具有{position: static; overflow: hidden}並且圖像具有{position: static}。

來源

2011-06-30 00:53:09 sam

在img標籤的簡單border-radius在Safari 5，Chrome瀏覽器16，火狐9的當前版本正常工作：

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

來源

2012-01-31 21:46:12 Nick

我認爲，當圖像或圖像的父位置發生此問題：絕對的。這是可以理解的，因爲絕對設置將元素從文檔流中取出。

我敢肯定，90％我已經看到了修復這一點，當我做我會更新這個帖子：d

來源

2012-02-09 11:44:52 Brad

還有現在的背景，剪輯CSS3。它適用於所有主流瀏覽器。選項是邊框，填充框和內容框。在你的情況下，我想你會想使用填充框。

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

來源

2012-12-29 05:01:34 thomasrye

額外裁剪通常只在邊界厚度的誤差範圍內。只是讓內徑略小，這樣誤差範圍的邊界，而不是下一個下下降到是

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

來源

2013-06-26 19:17:50

如何防止圖像溢出CSS3的圓角框？

回答

相關問題