PhotoSwipe | create Title Element | Responsive

Question

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

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/