2

问题：

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

  4. 圆角

    a) 矩形图像 - 已解决

    b) 横幅图片 - !!! 不可能！！！

所以问题是：我如何摆脱图像的矩形角？请看这里看问题： >>> 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/
4

3 回答 3

0

尝试：

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

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

于 2012-11-05T12:47:29.020 回答
0

更简单的解决方案：

在这里演示：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;
}
于 2013-06-26T12:58:32.173 回答
0

这是您回答的开始。下面的代码显示了如何设置图像父元素的类（这是您需要的）。

$('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来改变样式属性。我希望这有帮助

于 2013-06-26T13:21:46.847 回答