最小宽度有效，但最小高度无效

Question

我的Web应用程序中有react-image-slideshow滑块。我正在尝试用图像覆盖父div，但是在某些情况下，还剩下一些空间。 附言：我使用react-image-gallery

渲染的HTML：

.image-gallery-slide div{
  height: 200px;
}

.image-gallery-image{
  position: relative;
  object-fit: cover;
  top: 50%;
  transform: translateY(-50%);
  min-height: 100%;
  min-width: 100%;
  width: auto;
  height: auto;
}

<div tabindex="-1" class="image-gallery-slide  center" role="button" style="transform: translate3d(0%, 0px, 0px);">
   <div>
      <img class="image-gallery-image" src="https://picsum.photos/id/1018/1000/600/">
   </div>
</div>

我希望该图像覆盖父级div

Answer 1

高度的工作方式与CSS中的宽度略有不同。虽然width的百分比值将始终从元素的父级那里获取继承的宽度，但是当我们谈论高度时，这仅适用于根元素html。

这意味着父div必须具有定义的数字高度，或者本身为html。 （顺便说一下，这就是为什么您的隔离代码段起作用的原因，如注释中所述）

一种解决方案是使用vh（视口高度）单位并设置min-height: 100vh。不过，并非所有浏览器都支持。

如前所述，其他解决方案是设置父母的身高。

我很确定还有更多方法。

Answer 2

使用 px 单位并设置最小高度：200px