Question

基本上，我在一个相对容器中有3个绝对定位的元素，其中一个包含left: 100%（下一个）和一个left: -100%（上一张图片）。它们使用transition属性自动在可用位置之间切换。最终结果可见here。

<div id="slideshow">
    <article>
        <img>
    </article><article>
        <img>
    </article><article>
        <img>
    </article>
</div>
<style>
    div#slideshow   { position: relative; overflow: hidden }
    img             { width: 100%; height: auto }
    article         { width: 100%; position: absolute; transition: left 1s }
    article.current { left: 0 }
    article.prev    { left: -100% }
    article.next    { left: 100% }
</style>

（This是未应用overflow: hidden的结果，用于查看幻灯片的工作原理。）

如您所见，<img>响应其父级<article>。我知道块元素总是占用可用的宽度，所以我不认为我必须说明它，但正如你所看到的，我也必须在width: 100%上指定<article>。如果我不这样做会怎么样？ Something interesting, I'd say

.prev <img>的变幅是其他变量的两倍，而.next <img>的变焦大小为0x0。什么？您清楚地看到所有图像应具有相同的尺寸：100％宽度和自动高度。

我想要了解的是;为什么CSS会像它一样工作？我发现这个结果非常意外，所以我真的想要讨论为什么结果会返回它的作用，这样我就能更好地理解CSS值的底层组件是如何工作的。

Answer 1

你的问题不是在图像本身，而是在文章上。

这是规定尺寸的文章元素，图像从中获取尺寸。

未设置文章的宽度。缺少这一点，并且在存在 left 语句时，假定值为 right 0px。因此，当left为0时，宽度为容器的100％，当左边为-100％时宽度为200％，当左边为100％时，宽度为0。

如何解决这个问题？

为文章添加宽度：100％。 - 直接解决方案。
不是使用left属性移动文章，而是使用转换：translateX（-100％）;你不会有因左改变而产生的问题，而且性能更高

为什么不在绝对定位的孩子上定义宽度会得到异常行为？

1 个答案: