Question

我是新来的，并且一直在使用这个论坛并且学到了很多东西。我有一个问题，我希望你们可以帮助我。我正在一个网站上工作，它基于WP和WPEC。

我要做的是让产品模态视图中的图像动态调整大小（当用户纵向和横向调整浏览器大小时，图像会调整大小）。

我已经设法让函数处理窗口调整大小。然而，捕获的是，在加载时它仍然显示实际尺寸（800x1200），不适合浏览器尺寸。然后当我拖动浏览器然后调整大小（因为它应该在window.resize上）

我尝试添加DOM来调整大小，但它只是杀了我的其他功能（悬停在产品页面上），我需要工作才能打开模态视图。

无论如何，继承人调整大小的代码：

function resize() {



var w, h, conwidth, conheight, imgheight, imgwidth, top, left;
w = $(window).width();
h = $(window).height();
conwidth = w - 0;
if(conwidth < 493){ conwidth = 493; }
conheight = h - 0;
conratio = conwidth/conheight;
imgwidth = 800;
imgheight = 1204;
imgratio = 800/1204;
if(conratio < imgratio){
    width = conwidth;
    height = conwidth / imgratio;
} else {
    height = conheight;
    width = conheight * imgratio;
}
if(width > imgwidth || height > imgheight){
    width = imgwidth;
    height = imgheight;
}

top = (h/2) - (height/2);
left = (w/2) - (width/2);
if(left < 130){left = 130; }



$(".slideshow-content").css("position","fixed").css("margin",0);
$(".slideshow-content").css("top",0).css("left",0).css("height",height+"px").css("width",width+"px");
$(".psp-active").css("position","fixed").css("margin",0);
$(".psp-active").css("top",0).css("left",left+"px").css("height",height+"px").css("width",width+"px");
$(".slideshow-content img").css("left",left+"px").css("width",width+"px").css("height",height+"px");

}

请参阅this attempt

我希望它不会太难，也许它只是缺少一条线，但我一直在拉我的头发......

非常感谢！

在wp中使用jquery动态调整图像大小

0 个答案: