1

我是新来的，一直在使用这个论坛并学到了很多东西。我有一个问题，我希望你们能帮助我。我正在开发一个基于 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");

}

看到这个尝试

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

非常感谢你们！

4

0 回答 0