将元素从图像顶部定位 50%

Position Span Elements 50% from Top of Image

本文关键字：定位 顶部 图像 元素      更新时间：2023-09-26

我正在用 JavaScript 创建一个幻灯片，并希望相对于图像定位控件（下一个和上一个按钮），使其距离图像顶部 50%。

这是我的 HTML：

<div id="slideshow">
            <figure>
                <img src="https://c4.staticflickr.com/8/7495/16322256485_08ee0ee36f_z.jpg" />
                <figcaption>This is an example of a really long caption. Here I go. Do I wrap to a second line? Wrap wrap wrap wrap. Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap</figcaption>
            </figure>
            <figure>
                <img src="https://c1.staticflickr.com/9/8584/16136057529_e7b64928d0_z.jpg" />
                <figcaption>Insert caption</figcaption>
            </figure>
            <figure>
                <img src="https://c2.staticflickr.com/8/7474/16120961661_8dc12962dd_z.jpg" />
                <figcaption>Insert caption</figcaption>
            </figure>
        </div><!-- end slideshow -->

我定位的跨度是用 JavaScript 插入幻灯片的结束div 上方的。

最初的计划是相对于幻灯片div 定位按钮。但是，如果标题跨越多行，则幻灯片的高度会增加，按钮也会移动。

我希望按钮的位置相对于图像的高度是恒定的。因此，我希望它相对于图像定位自己，而不是相对于整个幻灯片div（包括标题）定位跨度，而不管标题的高度如何。

我无法使用像素定位，因为幻灯片必须具有响应性。

这是我的JS小提琴：

https://jsfiddle.net/amykirst/vtsru170/

我的一个想法是通过将图像和跨度包装在div 中来更改 HTML，如下所示：

<figure>
                <div class="img-contain">
                <img src="https://c1.staticflickr.com/9/8584/16136057529_e7b64928d0_z.jpg" />
                </div>
                <figcaption>This is an example of a really long caption. Here I go. Do I wrap to a second line? Wrap wrap wrap wrap. Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap</figcaption>
            </figure>

然后让 JavaScript 将跨度插入 "img-contain"div 中，并将其相对于该div 定位。JavaScript 需要找到当前正在显示的图像，并在每次按下"下一个"或"上一个"按钮时添加跨度。

现在，它会在页面加载时添加按钮。

我认为我的新解决方案可能会使事情变得过于复杂，所以我想看看是否有更好的答案。

你来了：

https://jsfiddle.net/vtsru170/4/

诀窍是向下一个/上一个跨度添加一个padding-bottom以匹配图像的高度（根据纵横比）。我在标签内使用了 p 标签作为按钮样式。

相关文章：