Jquery 自动缩放库旁边的位置信息框

我在一个外部站点上有两个演示：

没有文本的页面显示正确自动调整大小的预期行为。 我的第一个问题是：为什么info div在第二张和第三张图片上没有缩小到包装的宽度

主要问题是：如何将信息框放置在图像的右侧，以便包装器的大小与图像和文本的大小相匹配，并保持在视口的中心

我尝试了浮动，但对于未调整大小的元素无效

提前谢谢

我有以下设置：

//jQuery稍后将被清理： $document.readyinit； 函数初始化{ $.active.onload，functionevt{ setActive$this.parent$this； }; $.images.onclick，img，函数{ showNextImage$this.parent； }; } 函数showNextImageparent{ ifparent.find.active.nextimg.length！=0 setActiveparent，parent.find.active.nextimg； 其他的 setActiveparent，parent.findimg:first； } 函数setActiveparent，元素{ parent.find.active.removeClassactive.cssz-index，0； element.addClassactive； 元素cssz指数，10； autoSizeParentparent，元素； } 函数autoSizeParentparent，元素{ parent.widthelement.width； parent.heightelement.height； } .包装纸{ 位置：固定； 最高：50%； 左：50%； 转化：转化-50%，-50%； 填充：1em； 背景：白色； } .图像{ 位置：相对位置； 溢出：隐藏； } img{ 位置：绝对位置； 最大高度：540像素； } 标题 Lorem ipsum dolor sit amet，奉献精英。这是一个很好的例子，因为它是一个很好的例子！纵欲、口述、口齿不清、选择性口齿不清、排斥性静脉炎、乌兰

---

好了，现在我喜欢显示器：flex

.wrapper {
    position: fixed;
    display: flex;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    padding: 1em;
    background: white;
}

.images {
    position: relative;
    overflow: hidden;
}

.info {
    width: 462px;
    margin-left: 30px;
}

img {
    position: absolute;
    max-height: 540px;
}

---

将信息放置在包装器上的“图像弯曲方向：列”下。js设置的信息宽度。

嘿，我移动了一些东西，让其他人更容易阅读你的问题：-p您可以在imgur上托管这些图像，这样您就不必链接到您的站点。嵌入的代码段将运行。最好是全屏观看，这样更好。谢谢