设置重叠图像会导致图像缩小

Question

我有一个重叠图像，我试图将其放置在其div的底部。如果我不设置高度，它会覆盖屏幕（就像应该那样），但是太高。

如果我设置了高度，它的范围将从https://i.stack.imgur.com/GH3UT.png到https://i.stack.imgur.com/rjj6D.png。

代码

#home {
  height: 600px;
  position: relative;
}

.overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 250px; <- setting this causes it
}

我体内有

body {
    position: absolute;
}

HTML代码

 <section id="home">
        <div class="container-fluid">
            <img src="assets/img/shape.svg" class="overlay">
        </div>
 </section>

谢谢！

Answer 1

通过设置高度，图像将按照您的指示调整大小。删除高度，然后在.overlay上将bottom的位置设置为您满意的任何负值。