Question

我已经在网站上设置了图片，因此当您单击它们时，将出现一个模态图片。

<a class="portfolioTiles" href="#openModalRR1">
    <img class="desktopProjectImg"  src="Images/rocketRecruitment/Desktop/bwRocketRecruitmentImg1.png" id="rocketBeforeImg1" />
</a>

<div id="openModalRR1" class="modalDialog">
    <div class="desktopImg">
        <a href="#close" class="close desktopClose">&times;</a>
        <img src="rocketRecruitmentImg1.png" class="desktopModalImg">
        <p class="modalLabel">Rocket Recruitment Index Page</p>
    </div>
</div>

为了将模式图像放置在屏幕中央，我使用jQuery来测量屏幕尺寸和图像尺寸。像这样-

        var winHeight = $(window).height();
        var winWidth = $(window).width();

        
        var desktopImgHeight = $("div.desktopImg").height();
        var desktopImgWidth = $("div.desktopImg img").width();

        var desktopTopBottomPadding = ((winHeight - desktopImgHeight) / 2) + "px";
        var desktopLeftRightPadding = ((winWidth - desktopImgWidth) / 2) + "px";

        $("div.desktopImg").css("padding", desktopTopBottomPadding + " " + desktopLeftRightPadding);

有时效果很好，但有时模态图像会偏离屏幕底部一半。有什么我想要保持一致的东西吗？

测量图像和屏幕尺寸不一致

0 个答案: