Отзывчивая высота, основанная на размере фона

Question

Мне нужно, чтобы мое фоновое изображение было отзывчивым. Я использовал background-size: contain, и это, кажется, работает нормально, но мне нужно, чтобы высота моего div тоже была отзывчивой.

.container {
  width: 100%;
}
.bg {
  background: red url('https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg') no-repeat center top;
  background-size: contain;
  height: 600px;
}

<div class="container">
  <div class="bg"></div>
</div>

На данный момент высота составляет 600 пикселей и в зависимости от ширины экрана вы увидите красный фон, что не должно быть.

Я пробовал background: cover, но оно масштабирует изображение. Это должно быть 100% от div, но это не должно быть сокращено.

Как это исправить?

https://jsfiddle.net/mt386Ln0/

Answer 1

Существует простое решение без использования JavaScript. Просто добавьте <svg> с определенными пропорциями внутри контейнера.

Вы должны использовать размеры изображения в качестве viewBox <svg viewBox="0 0 960 628"></svg>

Пример:

div{
  background-image:url('https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg');
  background-size:cover;
  background-position:50%;
  background-repeat:no-repeat;
}
svg{
  width:100%;
  display:block;
  visibility:hidden;
}


.demo-1{width:100%}
.demo-2{width:40%}

<div class="demo-1">
  <svg viewBox="0 0 960 628"></svg>
</div>

<hr>

<div class="demo-2">
  <svg viewBox="0 0 960 628"></svg>
</div>

Answer 2

Если вы знаете соотношение изображения, вы можете рассмотреть хитрость заполнения:

.container {
  width: 100%;
}

.bg {
  background: red url('https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg') center/100%;
}

.bg:before {
  content: "";
  display: inline-block;
  padding-top: calc((628/960) * 100%); /* OR 65.42% */
  vertical-align: top;
}

<div class="container">
  <div class="bg"></div>
</div>

Answer 3

Вы пробовали:

background-size: cover

это позволит фону всегда покрывать DIV - вам может понадобиться настроить -

background-position: xxxxx

, так как иногда размер экрана при просмотреизображение будет означать установку запроса @meda, чтобы он был правильным для каждого другого обмана (т. е. мобильного или настольного компьютера)

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

Answer 4

Вместо использования background-size: contain я использовал background-size: auto, что, кажется, работает так, как вы хотите. Кроме того, я добавил немного javascript, чтобы помочь с изменением размера.

window.resize = function() {
var a = document.getElementById("a");
var b = document.getElementById("b");
a.style.width = "100%";
b.backgroundSize = "auto";
}

.container {
  width: 100%;
}
.bg {
  background: red url('https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg') no-repeat center;
  background-size: auto;
  height: 600px;
}

<div class="container" id = "a">
  <div class="bg" id = "b"></div>
</div>