先上效果圖，看看是不是你需要的：
點(diǎn)擊后效果分別為：
兩種邏輯：一種是展示圖寬大于高，則寬度滿屏，高度同比例縮放；另一種是高大于寬；高滿屏；寬等比例縮放，顯示位置都是寬高居中。但是考慮起來(lái)需要有多種情況。
我的實(shí)際項(xiàng)目頁(yè)面中圖片的寬度width:100%;高度不設(shè)置；那么需要考慮原始圖片的寬高情況；
iw, ih為要設(shè)置的點(diǎn)擊后彈出的圖片的寬和高；
ww, wh為屏幕的寬高；
rw,rh為實(shí)際的圖片寬高；
（頁(yè)面中圖片的寬度width:100%按照屏幕的寬度顯示，所以需要考慮圖片實(shí)際寬高）。
分析思路如下：
一、rw? <=? ww
? ? ? ?1、rw <= ww 且 rh<=wh? ? 真實(shí)圖片寬度小于等于屏幕寬度，真實(shí)圖片高度也小于等于屏幕高度時(shí)， iw=ww ；ih=rh*ww/rw ;
? ? ? ?2、rw <= ww 且 rh>wh? ??真實(shí)圖片寬度小于等于屏幕寬度，真實(shí)圖片高度大于屏幕高度時(shí)，ih=wh ;? iw=rw*wh/rh ;
二、rw >? ww
? ? ? ?1、rw >? ww 且 rh<=wh? 真實(shí)圖片寬度大于等于屏幕寬度，真實(shí)圖片高度也小于等于屏幕高度時(shí)，iw=ww;? ih=ww*rh/rw ;
? ? ? ?2、rw >? ww 且?rh>wh?真實(shí)圖片寬度大于等于屏幕寬度，則需要考慮兩種情況
? ? ? ? ? ?1）rw/rh <= ww/wh時(shí)? 真實(shí)的圖片寬高比小于等于屏幕的寬高比時(shí)，應(yīng)該以高度為準(zhǔn)，ih=wh; iw=rw*wh/ww;
? ? ? ? ? ?2）rw/rh > ww/wh時(shí)? 真實(shí)的圖片寬高比大于等于屏幕的寬高比時(shí)，應(yīng)該以寬度為準(zhǔn)，iw=ww; ih=ww*rh/rw。
總結(jié)：整體看有些情況可以合并在一起的，大家自行合并哦。這樣效果很不錯(cuò)。
另外再補(bǔ)充一點(diǎn)，蘋果手機(jī)的點(diǎn)擊事件，要避免300ms的延遲，點(diǎn)擊對(duì)象應(yīng)該添加cursor:pointer；
貼出代碼：
$(".article-content").on("click","img",function () {
? ? ? var _this =$(this);//將當(dāng)前的pimg元素作為_this傳入函數(shù)
? ? ? q.imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
});
function imgShow(outerdiv, innerdiv, bigimg, _this){
? ? ?var src = _this.attr("src");//獲取當(dāng)前點(diǎn)擊的pimg元素中的src屬性
? ? ?$(bigimg).attr("src", src);//設(shè)置#bigimg元素的src屬性
/*獲取當(dāng)前點(diǎn)擊圖片的真實(shí)大小，并顯示彈出層及大圖*/
? ? ? ?var windowW = $(window).width();//獲取當(dāng)前窗口寬度
? ? ? ? var windowH = $(window).height();//獲取當(dāng)前窗口高度
? ? ? ? var realWidth =this.width;//獲取圖片真實(shí)寬度
? ? ? ? var realHeight =this.height;//獲取圖片真實(shí)高度
? ? ? ? console.log(realWidth,realHeight);
? ? ? ? console.log(windowW,windowH);
? ? ? ? var imgWidth, imgHeight;
? ? ? ? // var scale = 1;//縮放尺寸，當(dāng)圖片真實(shí)寬度和高度大于窗口寬度和高度時(shí)進(jìn)行縮放
// 圖片尺寸小于屏幕尺寸
? ? ? ? if(realWidth<=windowW){
? ? ? ? ? ? ?// 圖片高也小于屏幕高
? ? ? ? ? ? ? ?if(realHeight<=windowH){
? ? ? ? ? ? ? ? ? ? ? ?imgWidth=windowW;
? ? ? ? ? ? ? ? ? ? ? ? imgHeight=realHeight/realWidth*windowW;
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ?// 圖片高大于屏幕高
? ? ? ? ? ? ? ? imgHeight=windowH;
? ? ? ? ? ? ? ? imgWidth=realWidth/realHeight*windowH;
? ? ? ? ? ? }
? ? ? }else{
? ? ? ? ? // 寬超過(guò)屏幕寬，高不超過(guò)
? ? ? ? ? ? ? ?if(realHeight<=windowH){
? ? ? ? ? ? ? ? ? ? ? imgWidth=windowW;
? ? ? ? ? ? ? ? ? ? ? imgHeight=windowW/realWidth*realHeight;
? ? ? ? ? ? ? ?}else{
// 寬高都超過(guò)屏幕寬高
// 高大一些，按高來(lái)
? ? ? ? ? ? ? ? ? ? if(realWidth/realHeight<=windowW/windowH){
? ? ? ? ? ? ? ? ? ? ? ? ? ?imgHeight=windowH;
? ? ? ? ? ? ? ? ? ? ? ? ? imgWidth=realWidth/realHeight*windowH;
? ? ? ? ? ? ? ? ? ? ?}else{
// 寬大一些，按寬來(lái)
? ? ? ? ? ? ? ? ? ? ? ? ? ?imgWidth=windowW;
? ? ? ? ? ? ? ? ? ? ? ? ? ?imgHeight=windowW/realWidth*realHeight;
? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? $(bigimg).css("width",imgWidth);//以最終的寬度對(duì)圖片縮放
? ? ? ? var w = (windowW-imgWidth)/2;//計(jì)算圖片與窗口左邊距
// 上下距離有誤，圖片并非垂直居中
? ? ? ? var h = (windowH-imgHeight)/2;//計(jì)算圖片與窗口上邊距
? ? ? ? $(innerdiv).css({"top":h, "left":w});//設(shè)置#innerdiv的top和left屬性
? ? ? ? $(outerdiv).fadeIn("fast");//淡入顯示#outerdiv及.pimg
? ? });
$(outerdiv).click(function(){//再次點(diǎn)擊淡出消失彈出層
? ? $(this).fadeOut("fast");
});
