Как сохранить пропорции на фоновом изображении заголовка?

Question

Это проблема, которая преследует меня с тех пор, как я начал изучать CSS.Я знаю, как установить background-image и использовать background-size: cover, чтобы получить его в масштабе.Однако я не знаю, как правильно разместить изображение в заголовке ... скажем, что-то вроде 10vh или 50%.

html, body {
  width: 100%;
  height: 100%;
}
#main-head {
  background: url('./header-image.jpeg');
  background-size: cover;
  height: 70%;
}

Я посмотрю ... Пример: 1

Я пытался сделать background-size: содержать, и хотякажется, что я более или менее стремлюсь к ... Я чувствую, что соотношение сторон ... выключено ...

html, body {
  width: 100%;
  height: 100%;
}
#main-head {
  background: url('./header-image.jpeg');
  background-size: 100% 100%;
  height: 70%;
}

У меня было тело установлено на высоту: 100 ... и это был результат ... Пример: 2

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

Answer 1

Обновление background-size: cover сохранит соотношение сторон.

Кроме того, вы можете центрировать фон, установив background-position: center;

#main-head {
        background: url('./header-image.jpeg');
        background-size: cover; // <-- maintain the aspect ratio, make it cover the element
        background-position: center; // <-- this will make the background center
        height: 70%;
}

Answer 2

вы можете использовать background-position: center;, чтобы сохранить центр изображения.и если вы хотите сделать <img/> автоматическое масштабирование.Вы можете использовать object-fit, чтобы сделать это.(PS: IE не поддерживает object-fit)