Как сохранить одинаковое соотношение / размер изображения на всех экранах разных размеров?

Question

Как вы сохраняете соотношение фонового изображения к разным размерам экрана? Другими словами, как я могу убедиться, что фоновое изображение всегда выглядит идеально "по центру". Обратите внимание, у меня есть несколько других экранов с другими фоновыми изображениями, поэтому решение должно работать для разных изображений, а не только для домов ниже.

CSS:

#background{
     background-image: url("../images/houses.png");
     background-color: whitesmoke; /* Used if the image is unavailable */
     height: 100%; /* You must set a specified height */
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover; /* Resize the background image to cover the entire container */
     text-align: center;
     padding: 2.5%;

}

Это желаемый вывод для ВСЕХ размеров экрана. Идеально выровнено:

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

Answer 1

попробуйте это:

#background{
  background-image: url("../images/houses.png"); /* The image used */
  background-color: whitesmoke; /* Used if the image is unavailable */
  height: 500px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container*/
}

Answer 2

Поскольку ваш CSS сообщает странице, что фон покрывает весь экран как по ширине, так и по высоте, это вызовет некоторые неровности на экранах, которые не соответствуют соотношению сторон вашего изображения. Он должен растягиваться, чтобы покрыть всю высоту вашего второго экрана, но «покрывать» масштабируется в обоих направлениях, поэтому он продолжает увеличивать размер изображения, пока весь экран не будет покрыт. Если вы просто хотите убедиться, что фон заполняет экран по горизонтали (и не против того, чтобы внизу оставалось место для более высоких экранов), просто установите ширину, чтобы заполнить весь экран:

фон -размер: 100% авто;