Question

我希望得到关于这种情况的可靠答案。

article {
    overflow: hidden;
    display: inline-block;
    border: 1px solid;
}
img {
    max-width: 40%;
    max-height: 65%;
}

<article>
    <img src="http://placehold.it/200x800">
</article>
<article>
    <img src="http://placehold.it/800x800">
</article>

会发生什么：

图像相对于自己的容器而言，它们的大小跟在它们之后，因此它们似乎与自己相关。

这是否有记录？什么决定哪个财产领先？为什么效果在第一轮停止，直到它们的大小为0才重复？最后：使用此效果的任何有用方法？

Answer 1

您未在article元素上设置任何大小。因此，它的大小来自它自己的内容 - 一个图像元素。您还在图像元素中没有设置任何大小，这是一个很好的做法。因此，在图像渲染之前，浏览器不知道要设置的大小。

实际上，你强迫浏览器猜测。毫不奇怪，他们都以自己的方式猜测。在不同的浏览器中打开相同的小提琴，看到他们以不同的方式呈现此设置。如果在图像元素上设置尺寸属性，则渲染将完全不同。如果您在文章元素上设置尺寸，渲染将再次不同。

底线：不要试图混淆浏览器 - 结果是不可预测的。

如果你喜欢自我引用作为一个概念，请享受Douglas Hofstadter的Godel, Escher, Bach: An Eternal Golden Braid。这是我最喜欢的书之一。