// 实现图片旋转自适应外边框
//算法：1、当图片宽和高同时大于外边框时以宽为标准100%(相对外边框)进行自适应，原图不变垂直水平居中显示
2、当图片宽大于外边框宽，高小于外边框高时，以宽为标准100%(相对外边框)进行自适应，原图不变垂直水平居中显示
3、当图片宽小于外边框宽，高大于外边框高时，以高为标准100%(相对外边框)进行自适应，原图不变垂直水平居中显示
4、当图片宽小于外边框宽，高小于外边框高时，原图不变垂直水平居中显示
var yuanWh,yuanht,
boxwh,boxht,
imgwh,yuanht;
var imgzoom = function (){
yuanWh = $('.swiper-slide-active
.Rotation').attr('width');
yuanht = $('.swiper-slide-active
.Rotation').attr('height');
var boxwh = $('#mask').width(),//边框的宽度
boxht =
$('#mask').height();
if(yuanWh > boxwh && yuanht > boxht){
if(yuanWh > yuanht){
$('.swiper-slide-active
.Rotation').css({'width':'100%','height':'auto','top':'0px','left':'0px','bottom':'0px;','right':'0px;','margin':'auto'});
}else if(yuanWh < yuanht){
$('.swiper-slide-active
.Rotation').css({'width':'auto','height':'100%','top':'0px','left':'0px','bottom':'0px;','right':'0px;','margin':'auto'});
}
}else if(yuanWh > boxwh && yuanht <
boxht){
$('.swiper-slide-active
.Rotation').css({'width':'100%','height':'auto','top':'0px','left':'0px','bottom':'0px;','right':'0px;','margin':'auto'});
}else if(yuanWh < boxwh && yuanht >
boxht){
$('.swiper-slide-active
.Rotation').css({'width':'auto','height':'100%','top':'0px','left':'0px','bottom':'0px;','right':'0px;','margin':'auto'});
}else if(yuanWh < boxwh && yuanht <
boxht){
$('.swiper-slide-active
.Rotation').css({'height':yuanht+'px','width':yuanWh+'px','top':'0px','left':'0px','bottom':'0px;','right':'0px;','margin':'auto'});
}else if(yuanWh == boxwh && yuanht == boxht){
$('.swiper-slide-active
.Rotation').css({'width':yuanWh+'px','height':yuanht+'px','top':'0px','left':'0px','bottom':'0px;','right':'0px;','margin':'auto'});
}
}
html图片轮播放大 jquery+CSS3实现轮播图 js实现轮播图片自适应等比显示 图片旋转 图片拖拽 鼠标滚动放大缩小...
如果觉得《html图片轮播放大 jquery+CSS3实现轮播图 js实现轮播图片自适应等比显示 图片旋转》对你有帮助，请点赞、收藏，并留下你的观点哦！
