大小调整图像以适合在一个div +保持比+水平和垂直方向+圆角

Question

存在的问题为中心：

1. 大小调整图像以适应在一个div - 解决
2. 保持比 - 解决
3. 水平，垂直居中 - 解决

4. 圆角

   一个）的矩形图像 - 解决

   b）banner images - !!! impossiburu !!!

所以问题是：如何摆脱图像的矩形角？请看看这里，看看问题：>>>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. 夹：http://jsfiddle.net/infoman/5fzET/4/

Answer 1

尝试：

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

你可以和它添加到div的图像（S）。

Answer 2

简单的解决办法：

演示在这里：http://jsfiddle.net/EdHQh/

HTML：

<div class='container'> 
    <img class='resize_fit_center' src='...' /> 
</div> 

CSS：

.container { 
    width: 115px; 
    height: 115px; 
    line-height: 115px; 
    text-align: center; 
    border: 1px solid orange; 
} 
.resize_fit_center { 
    max-width:100%; 
    max-height:100%; 
    vertical-align: middle; 
    border-radius: 20px; 
    -moz-border-radius: 20px; 
    -webkit-border-radius: 20px; 
} 

Answer 3

这是一个开始你的答案。下面的代码展示了如何设置图像父元素的类（这是你需要的）。

$('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; 

     // alert(imgRatio); 

switch (true) { 
case (imgRatio < 1.1 && imgRatio > .99): 
    $(this).addClass('fillfull'); 
    break; 
case (imgRatio < 1): 
    $(this).addClass('fillwidth'); 
    $(this).css('top', imgWidthTop); 
    //$(this).css('clip', 'rect(100px 0 100px 0)'); 
    $(this).parent().addClass('bev'); 

    break; 
case (imgRatio > 1): 
    //$(this).css('clip', 'rect(0 100px 0 100px)'); 
    $(this).addClass('fillheight'); 
    $(this).css('left', imgHeightLeft); 
    $(this).parent().addClass('bev'); 

    break; 
default: 
    break; 
} 
}); 

---

.bev { 
    border: solid 1px green; 
    width: 300px; 
    height: 300px; 
    overflow: hidden; 
    border-radius: 10px; 
    margin-left: 10px; 
    } 

div img { 
    outline: solid 1px red; 
} 

.fillwidth { 
    width: 100%; 
    max-height: 99999px; 
    position: relative; 
    /*top*/ 
} 

.fillheight { 
    height: 100%; 
    max-width: 99999px; 
    position: relative; 
    /*left*/ 
    } 


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

你可以有不同的薮类与斜口不同的充角落或者你可以使用JavaScript来更改样式属性。我希望这可以帮助