Установка оверлейного изображения приводит к уменьшению изображения - PullRequest
Новая
       7

Установка оверлейного изображения приводит к уменьшению изображения

0 голосов
/ 08 ноября 2018

У меня есть оверлейное изображение, которое я пытаюсь расположить в нижней части его 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>

Заранее спасибо!

1 Ответ

0 голосов
/ 08 ноября 2018

Устанавливая высоту, изображение просто изменяет размер, как вы сказали. Снимите высоту и на .overlay просто установите bottom на любое отрицательное значение, которое вас устраивает.

...