内联块不会调整到Firefox中的子级大小

Question

我正在尝试创建一个自定义的、响应式的图像映射，其中用"a“标记表示的”-elements“区域带有百分比样式。虽然以下代码可以在Chrome和Opera中运行，但我无法在Firefox中获得想要的结果：

在Chrome和Opera中，它的行为方式(据我所知)是通过使用"map-wrapper“类来调整外部div的大小来适应图像的大小。Firefox总是会让"map-wrapper“变得全宽，即使它被明确定义为行为类似于”内联块“。

小提琴：Code example

HTML：

    <div class="map-container">
  <div class="map-wrapper">
    <img src="hhttps://apod.nasa.gov/apod/image/1611/ChicagoClouds_Hersch_3600.jpg" usemap="map">
    <a class="img-map-event" href="#"></a>
    <a class="img-map-event" href="#"></a>
    <a class="img-map-event" href="#"></a>
    <a class="img-map-event" href="#"></a>
    <a class="img-map-event" href="#"></a>
  </div>
</div>

CSS：

img{
  height: 100%;
}
.map-container{
  text-align: center;
  box-sizing: border-box;
}
.map-wrapper{
  display: inline-block;
  position: relative;
  max-height: 100%;
  text-align: center;
  border: 1px solid #000;
}

期望的结果是"map-wrapper“总是完美地包围它的孩子，并增加它的宽度和高度。

我真的很期待解决这个问题，所以谢谢你的阅读。

Answer 1

问题是Chrome在图片上的100%高度与Firefox的100%不同。Firefox肯定会缩放到图像大小的100%，而Chrome会缩放到可用的空间。

添加样式"height: calc(100vh -Y px);“将始终缩放到网页上的可用空间，从而获得所需的结果。