我有一个圆形图像轮播,它几乎涵盖了整个浏览器视口。每个轮播项目都是需要以CSS3的background-size: cover
样式呈现的风景图像,以及background-size: contain
的肖像图像。当然,对于支持它的浏览器,这就是我使用的,它工作正常。
我正在尝试为不支持这些CSS3属性的浏览器实现基于jQuery的回退。
if (Modernizr.backgroundsize) {
// all good, do nothing (except some housekeeping)
}
else {
// emulate background-size:cover
$('.slide img').each(function() {
iw = $(this).width();
ih = $(this).height();
iratio = iw/ih;
if (iw >= ih) { // landscape
var newHeight = w / iratio;
if (ih<h) {
$(this).css({height:newHeight, width:w}); // fix this
// use negative margin-left to show center?
} else {
$(this).css({height:newHeight, width:w});
// set negative margin-top to show the center of the image
}
} else { // portrait
var newWidth = h * iratio;
$(this).css({height:h, width:newWidth});
}
});