Подгоните высоту div к высоте фонового изображения (с эффектом параллакса) - PullRequest
Новая
       15

Подгоните высоту div к высоте фонового изображения (с эффектом параллакса)

0 голосов
/ 02 марта 2019

Я обнаружил проблему с фоновым изображением параллакса шириной 100%.Я должен использовать фиксированное значение высоты div, потому что оно пустое.

Проблема в том, что пустое пространство под фоновым изображением, когда область просмотра ограничена.Спросите: как создать адаптивную высоту div, равную высоте фонового изображения.

Мой текущий поиск и попытки: 

// tried, but didn't work

// <div class="parallax">
//   <img src="https://images.pexels.com/photos/574205/pexels-photo-574205.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
// </div>

// img{
//   visibility: hidden;
//   max-width: 100%;
// }

//second method didn;t work too
// .parallax{
//   background-image: url("https://images.pexels.com/photos/574205/pexels-photo-574205.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260");
//   background-attachment: fixed;
//   background-repeat: no-repeat;
//   background-size: 100% auto;
//   padding-top: 60%;
//   height: 0;
// }
html, body{
  width: 100%;
  margin: 0;
  padding: 0;
}

.empty-space-20{
  height: 20vh;
  background-color: lime;
}



.parallax{
  background-image: url("https://images.pexels.com/photos/574205/pexels-photo-574205.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 100% auto;
  height: 40vh;
}



.empty-space{
  height: 1000px;
  background-color: coral;
}
<div class="empty-space-20">some empty space</div>
<div class="parallax"></div>

<div class="empty-space">some empty space</div>

1 Ответ

0 голосов
/ 02 марта 2019

Используйте vw вместо vh, чтобы лучше реагировать и избегать места под изображением.Изображение изменяется по высоте, сохраняя его соотношение, поэтому вы делаете то же самое для div.Вы также можете настроить положение изображения для размещения внутри этого div. 

html, body{
  width: 100%;
  margin: 0;
  padding: 0;
}

.empty-space-20{
  height: 20vh;
  background-color: lime;
}



.parallax{
  background-image: url("https://images.pexels.com/photos/574205/pexels-photo-574205.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 0 20vh;
  height: 50vw;
}



.empty-space{
  height: 1000px;
  background-color: coral;
}
<div class="empty-space-20">some empty space</div>
<div class="parallax"></div>

<div class="empty-space">some empty space</div>

Если вы не хотите использовать пробел при прокрутке, уменьшите высоту, как показано ниже, и оставьте положение по умолчанию для фона: 

html, body{
  width: 100%;
  margin: 0;
  padding: 0;
}

.empty-space-20{
  height: 20vh;
  background-color: lime;
}



.parallax{
  background-image: url("https://images.pexels.com/photos/574205/pexels-photo-574205.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: 100% auto;
  height: calc(50vw - 20vh);
}



.empty-space{
  height: 1000px;
  background-color: coral;
}
<div class="empty-space-20">some empty space</div>
<div class="parallax"></div>

<div class="empty-space">some empty space</div>
...