Необходимо настроить адаптивное (жидкое) фоновое изображение с заданной высотой

Question

Я помогаю другу настроить веб-сайт для его компании. В верхней части страницы, под панелью навигации, у меня есть фоновое изображение дома, ширина которого составляет 100%, размер изображения 2400 x 1602 пикселей. Моя проблема в том, как управлять изображением, чтобы дом всегда был впереди и в центре. Мне также нужно держать высоту в (или около) 75vh.

Я попытался использовать background-size: cover и Содержать, а также установить background-позиции. Но с тем, как работает покрытие, дом не всегда центрирован. Особенно, когда ширина браузера больше - тогда видна только крыша дома. Затем я попытался использовать соотношение сторон изображения для заполнения. Это хорошо работает, но не позволяет мне устанавливать высоту (насколько я могу судить), поэтому с большими экранами я получаю высоту очень большой.

Надеялся, что у кого-то может быть предложение, которое поможет мне и укажет мне правильное направление. В конце концов, я хотел бы получить изображение дома, где дом всегда виден, а также способен сохранять высоту в 75 Вч. У меня есть ощущение, что медиа-запросы могут быть моим ответом, но я хотел получить совет, прежде чем я продолжу идти по этому пути. Также не был уверен, нужно ли мне обрезать свое изображение, чтобы ограничить высоту? Я пробовал так много разных вещей, что я не уверен, как поступить. Спасибо за любое предложение, я действительно ценю это.

Answer 1

Я думаю, что фоновое изображение обложки - это правильный подход, вы можете просто написать что-то, что не центрирует изображение, и поэтому вы видите только крышу (верхнюю часть изображения, которую я предполагаю) вместо средняя часть на очень панорамных экранах.

Вот код, который я бы использовал:

Это HTML

<div class="header">Your menu and other header stuff goes here</div>
<div class="bg_image" style="background: url('https://www.marriedwithmoney.com/wp-content/uploads/2017/06/house-1024x698.jpeg') center center / cover no-repeat;"></div>

А это CSS

.header {
  width: 100%;
  height: 200px;
  background-color: #ccc;
}
.bg_image {
  width: 100%; 
  height: 75vh;
}

и вот рабочий пример, который делает то, что вы ввели, если я правильно понял вашу ситуацию https://codepen.io/anon/pen/REerRR