Как центрировать изображение с обложкой в ​​css без использования javascript

Question

function set_bg_container_height() {
  let e = document.getElementById("bg_container");
  e.style.height = window.innerHeight + "px";
}

window.onresize = function() {
  set_bg_container_height();
}

set_bg_container_height();

body {
  margin: 0;
  padding: 0;
}

#bg_container {
  width: 100%;
  height: 100%;
  /* will be overruled by javascript */
}

#bg_image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

<div id="bg_container">
  <img id="bg_image" src="eyes1.jpg">
</div>

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

или другое нежелательное поведение. Возможно ли это без использования javascript?

Answer 1

Вы также можете поместить свойство background-position в файл css, который имеет значения x-axis и y-axis вместе с center, вы можете сделать это так background-position:center; или как background-position:x-axis y-axis или background-position:aSingleValueForBothAxis Я очень надеюсь, что это решит вашу проблему