Question

我正在尝试创建一个自定义的响应式图像映射，其中“区域”元素（由“a”标记表示）使用百分比进行样式设置。虽然以下代码适用于Chrome和Opera，但我无法通过Firefox获得所需的结果：

在Chrome和Opera中，通过使用“map-wrapper”类将外部div调整为图像的大小，它的行为应该如我所理解的那样。 Firefox虽然总是使用“map-wrapper”全宽，但它的风格显然与“inline-block”相似。

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;
}

期望的结果是“地图包装器”总是完美地覆盖它的孩子并且增加它的宽度和高度。

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

Answer 1

问题在于，Chrome在图像上的100％高度与Firefox的100％不同。 Firefox将明确扩展到100％的图像大小，而Chrome将扩展到可用空间。

添加样式＆＃34; height：calc（100vh - Y px）;＆＃34;图像将始终缩放到网页上的可用空间，从而产生所需的结果。

内联块不会在Firefox

1 个答案: