css - 设置叠加图像会导致图像缩小

Question

我有一个叠加图像，我正试图将其定位到其 div 的底部。如果我不设置高度，它会覆盖屏幕(就像它应该的那样)但是太高了。

如果我设置高度，它会从 /image/GH3UT.png 开始至 /image/rjj6D.png .

代码

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

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

我的 body 里有

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 位置设置为您满意的任何负值。