Question

问题：

调整图片大小以适合div - 已解决
保持比例 - 已解决
水平和垂直居中 - 解决了
圆角

a）矩形图像 - 已解决

b）横幅图片 - !!! impossiburu !!!

所以问题是：如何摆脱图像的矩形角？请看这里查看问题：＆gt;＆gt;＆gt; http://jsfiddle.net/infoman/5fzET/3/＆lt;＆lt;＆lt;

换句话说：图像的角是圆的，但它们不在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;
    }
});

尝试＆amp;失败：

剪辑：http://jsfiddle.net/infoman/5fzET/4/

Answer 1

尝试：

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

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

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

你可以使用不同角落的serval不同的类，或者你可以使用javascript来改变样式属性。我希望这有帮助

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

3 个答案: