调整图像大小以适合 div + 保持比例 + 水平和垂直居中 + 圆角

问题：

1. 调整图像大小以适合 div - 已解决
2. 保持比例已解决
3. 水平和垂直居中 - 已解决

4. 圆角

   a) 矩形图像 - 已解决

   b) 横幅图像 -!!!不可能的！

所以问题是：如何去掉图像的矩形角？请看这里看看问题所在：>>>http://jsfiddle.net/infoman/5fzET/3/ http://jsfiddle.net/infoman/5fzET/3/

换句话说：图像的角是圆的，但它们不是在 div 的末尾而是在其之外。我需要将图像在 div 结束处进行圆角化。

HTML

test image ratio w/h = 4
<div>
    <img id="myimg" src='http://placehold.it/200x50' draggable="false"/>
</div>

<br/>

test image ratio w/h = 0.25
<div>
    <img id="myimg" src='http://placehold.it/50x200' draggable="false"/>
</div>

<br/>

test image ratio w/h = 1 but small  
<div> 
    <img id="myimg" src='http://placehold.it/50x50' draggable="false"/>
</div>

<br/>

test image ratio w/h = 1 perfect fit
<div>
    <img id="myimg" src='http://placehold.it/300x300' draggable="false"/>
</div>

<br/>

test image ratio w/h = 1 much too big
<div>
    <img id="myimg" src='http://placehold.it/2000x2000' draggable="false"/>
</div>

CSS

div {
    border: solid 1px green;
    width: 300px;
    height: 300px;
    overflow: hidden;
    border-radius: 10px;
}

div img {
    outline: solid 1px red;
}

.fillwidth {
    width: 100%; 
    height: auto;
    position: relative;
    /*top*/
}

.fillheight { 
    height: 100%; 
    width: auto;
    position: relative;
    /*left*/
}


.fillfull { 
    height: 300px; 
    width: 300px;
}

jQuery

$('img[id^="myimg"]').each(function() {
    var imgWidth = $(this).width(),
        imgHeight = $(this).height(),
        imgRatio = imgWidth / imgHeight,
        imgWidthTop = (((300 / imgWidth) * imgHeight) / 2) * -1 + 300 / 2,
        imgHeightLeft = (((300 / imgHeight) * imgWidth) / 2) * -1 + 300 / 2;


    switch (true) {
    case (imgRatio === 1):
        $(this).addClass('fillfull');
        break;
    case (imgRatio < 1):
        $(this).addClass('fillwidth');
        $(this).css('top', imgWidthTop);
        break;
    case (imgRatio > 1):
        $(this).addClass('fillheight');
        $(this).css('left', imgHeightLeft);
        break;
    default:
        break;
    }
});​

尝试与失败：

1. clip : http://jsfiddle.net/infoman/5fzET/4/ http://jsfiddle.net/infoman/5fzET/4/

Try:

border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

您可以将其添加到 div 以及图像中。