1. 图片的宽高处理 (法一将图片等比压缩, 然后居中显示, 图片的容器的宽高固定)
- $(function(){
- AutoSize($(".navdetail_l_pic-img"),458,442);
- })
- function AutoSize(Img, maxWidth, maxHeight) {
- var image = new Image();
- image.src = Img.attr("src");
- console.log(Img.attr("src"),"w"+image.width,"h"+image.height);
- if(image.width < maxWidth && image.height < maxHeight) {
- Img.width = image.width;
- Img.height = image.height;
- $(".navdetail_l_pic-img").CSS({"width":Img.width,"margin-left":"-"+Img.width/2+"px"});
- $(".navdetail_l_pic-img").css({"height":Img.height,"margin-top":"-"+Img.height/2+"px"});
- } else {
- if(maxWidth / maxHeight <= image.width / image.height){
- Img.width = maxWidth;
- Img.height = maxWidth * (image.height / image.width);
- $(".navdetail_l_pic-img").css({"width":Img.width,"margin-left":"-"+Img.width/2+"px"});
- $(".navdetail_l_pic-img").css({"height":Img.height,"margin-top":"-"+Img.height/2+"px"});
- } else {
- Img.width = maxHeight * (image.width / image.height);
- Img.height = maxHeight;
- $(".navdetail_l_pic-img").css({"width":Img.width,"margin-left":"-"+Img.width/2+"px"});
- $(".navdetail_l_pic-img").css({"height":Img.height,"margin-top":"-"+Img.height/2+"px"});
- }
- }
- $(".navdetail_l_pic-img").css({"display":"block"});
- }
2. 大图自适应 (法二高度等于屏幕高度, 宽度自适应, 同时居中显示)
- var imgH = $(window).height()
- var imgObg = $('.bigpicmask-wrap')
- imgObg.css({'height':imgH,'top':0,'margin-top':0,'width':'auto'})
- var imgW = imgObg.width()
- imgObg.css('margin-left','-'+imgW/2+'px')
来源: https://www.2cto.com/kf/201808/773756.html