问题:
圆角
a)矩形图像 - 已解决
b)横幅图片 - !!! 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;
}
});
尝试&amp;失败:
答案 0 :(得分:0)
尝试:
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
您可以将其添加到div和图像中。
答案 1 :(得分: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;
}
答案 2 :(得分: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;
}
你可以使用不同角落的serval不同的类,或者你可以使用javascript来改变样式属性。我希望这有帮助