PhotoSwipe \创建标题元素\ Responsive

Question

我想在用PhotoSwipe创建的图像库下面添加一个标题元素。但是我的标题元素不在图像下面。当浏览器垂直重比例尺时，它会在图像中保持快速。

创建元素的JS：

            lightbox.pswp.ui.registerElement({
                name: 'werkInformationen',
                className: 'smallWerkInformationen',
                appendTo: 'wrapper',
                onInit: (el, pswp) => {
                    var wrapDiv = document.createElement('div');
                    wrapDiv.className = 'wrapDiv';

                    var popUp = document.createElement('div');
                    popUp.className = 'popUpWerkInformationenTitle';
                    popUp.id = 'popUpWerkInformationenTitle';

                    var span = document.createElement('span');
                    span.className = 'child';
                    span.id = 'popUpWerkInformationenTitleSpan';
                    
                    wrapDiv.appendChild(popUp);
                    popUp.appendChild(span);

                    el.appendChild(wrapDiv);

                    pswp.on('change', (a,) => {
                        var paramsFromCurrentWerk = new URLSearchParams(lightbox.pswp.currSlide["data"]["src"]);
                        document.getElementById("popUpWerkInformationenTitleSpan").innerHTML = paramsFromCurrentWerk.get('id') + " | " + paramsFromCurrentWerk.get('werkName') + " | " + paramsFromCurrentWerk.get('material') + " | " + paramsFromCurrentWerk.get('kuenstler');
                    });
                }
            });

输出到HTML：

<div class="smallWerkInformationen pswp__hide-on-close">
    <div class="wrapDiv">
        <div class="popUpWerkInformationenTitle">
            <span class="child">PLACEHOLDER TEXT</span>
        </div>
    </div>
</div>

CSS：

.wrapDiv {
    min-width: 600px;
}

.smallWerkInformationen {
    position: relative;
}

#popUpWerkInformationenTitle {
    font-size: 12px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
}

#popUpWerkInformationenTitleSpan {
    text-align: center;
    background-color: black;
    color: #fff;
    border-radius: 5px;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 15px;
    font-size: 1rem !important;
    padding: 5px;
}

在没有空格之前的预期结果：在没有空间之前的预期结果

我的结果是：

有足够的空间来适应下面的文本元素，但它在图像中。

我的结果

Answer 1

已经有一个标题示例。但这不是我想要的。

https://photoswipe.com/caption/