邊框半徑div內的CSS動畫

Question

我正在嘗試爲另一個div邊框半徑內的圖像製作動畫。我發現這裏的腳本，自動旋轉圖像，但我想圖像被放置在邊框半徑內只是舉例喜歡這張截圖 - http://i.imgur.com/fsLlTku.jpg

這裏是我的所有代碼

http://jsfiddle.net/isherwood/8wkaT

HTML：

<div class="foodimg"> 
    <img src="http://i.imgur.com/litX96U.jpg" class="foodround" /> 
    <img src="http://i.imgur.com/Z3Rcoad.jpg" class="foodround" /> 
    <img src="http://i.imgur.com/WtVOxWa.jpg" class="foodround" /> 
    <img src="http://i.imgur.com/idv5HXP.jpg" class="foodround" /> 
</div> 

CSS：

.foodimg { 
    border-radius: 200px; 
    width: 320px; 
    height: 320px; 
    position: absolute; 
    left: 100px; 
} 

個

JS：

var $imgs = $(".foodimg").find("img"), 
    i = 0; 

function changeImage() { 
    var next = (++i % $imgs.length); 
    $($imgs.get(next - 1)).fadeOut(500); 
    $($imgs.get(next)).fadeIn(500); 
} 

var interval = setInterval(changeImage, 5000); 

請幫助。

Answer 1

.foodimg { 
    ... 
    overflow: hidden; 
} 
.foodimg img { 
    max-height: 320px; 
} 

http://jsfiddle.net/isherwood/8wkaT/3