twentytwenty js | <img> 的定位

twentytwenty js | positioning of an <img>

我在一个网站上工作,有一个 "before-after" 动画的案例,我用 twentytwenty js 做了。

它在任何地方都可以正常工作,除了一页,后图(右侧)似乎不适合 "container"。图像应该有浅色边框,但它只显示在顶部。使用 "border: 1px solid lightgrey" 具有相同的结果。

Link到问题页面:

http://www.nordglueck.com/printness/html/Referenz/raumplus_Faltposterbroschuere_Illustration_nach_Bild.html

快速解决!将 right: 0; 添加到 twentytwenty.css 文件中的 .twentytwenty-container img 并在 style.css 文件中从 .bild-1 [=] 中的宽度和高度中取 2px 32=]

您的最终输出将如下所示

在你的twentytwenty.css

.twentytwenty-container img
    max-width: 100%;
    position: absolute;
    top: 0;
    right: 0px;
    display: block;

在你style.css

.bild-1
    width: 388px;
    height: 348px;
    display: inline-block;
    float: right;