Question

我有一个包含图片和覆盖图的包装div。

我希望图像显示出包装格的宽度和高度的100％。

我还希望叠加层显示包装div的宽度和高度的100％，并显示在图像的顶部。

我已经完成了这项工作，但有一个要解决的问题：当我将浏览器调整为小屏幕尺寸时，overlay div看上去会比图片略高。

有人会知道这是怎么回事，我该如何修改呢？

我的代码是：

<div class="banner-slide">
  <div class="banner-slide__overlay"></div>
  <img src="dist/images/banner-image.png" class="banner-slide__image">
</div>

SCSS：

.banner-slide {
  max-height: 670px;
  overflow: hidden;
  position: relative;

  &__overlay {
    background: #333;
    opacity: .4;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 99;
  }

  &__image {
    height: 100%;
    width: 100%;
  }
}

Answer 1

我将display:block添加到了img

* {
  margin: 0;
}

.wrapper {
  width: 100%;
  max-height: 500px;
  overflow: hidden;
  position: relative;
}

.overlay {
  background: #333;
  opacity: .4;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 99;
}

img {
  height: 100%;
  width: 100%;
  display:block;
}

<div class="wrapper">
  <div class="overlay">
  </div>
  <img src="https://news.nationalgeographic.com/content/dam/news/2018/05/17/you-can-train-your-cat/02-cat-training-NationalGeographic_1484324.ngsversion.1526587209178.adapt.1900.1.jpg" />
</div>

重叠div高于组合div。如何使用CSS进行修复？

1 个答案: