Изменение размера divs ширина и высота в браузере изменить размер с помощью CSS

У меня есть большой div, содержащий изображение. Я хочу, чтобы изображение уменьшалось или расширялось в зависимости от высоты/ширины окна браузера. Я могу достичь этого горизонтально, используя width: 100% но изображение div исчезает полностью, если я устанавливаю высоту 100%.

Я понимаю, что вы должны установить для BODY и HTML высоту и ширину 100%, и я сделал это безрезультатно.

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

Кто-нибудь знает правильный способ достижения этого, желательно только с помощью CSS?

Мой код:

HTML, BODY {
  width: 100%;
  height: 100%;
}

#imagecontainer {
  width: 100%;
  height: 100%;
  background-image: url(image.jpg);
  background-size: 100% auto;
  background-position: center;
}