Fancybox区域未调整为图像尺寸

Question

在我的html页面中，我调用onload一个化装盒以这种方式打开图像：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

<script>
    document.body.onload = function () {
        //Show popup on load
        $.fancybox.open('<a href="/medical_card"><img src="{% static "img/Popup_Home.png" %}" alt="" width="50%" height="50%" /></a>');
    };
</script>

图像可以正确打开，但是我看到一个100％的空白花式框区域将其包裹起来，并且图像向左对齐：

我将创建一个花哨的弹出区域，该区域具有与图像相同的尺寸并位于屏幕中央。 我在哪里错了？

非常感谢