奇怪的身体溢出 - CSS

Question

我将图像设置为身高的100％时遇到问题。我在页面底部得到了这个奇怪的空白区域，即使我在所有内容上都设置了边距和填充为0。我可以使用overflow-y: hidden，但我更愿意弄清楚它为什么这样做。谢谢！

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

img {
  height: 100%;
}

<img src="https://images.unsplash.com/photo-1429554429301-1c7d5ae2d42e?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" alt="background" />

Answer 1

您需要在display: block上使用img。