Как разместить изображение и текст рядом с разным соотношением ширины и одинаковой высотой ⇐ CSS

[Anonymous]

Мне нужно разместить два элемента div рядом: левый элемент управления занимает 60 % ширины экрана, а правый элемент – оставшиеся 40 %. Высота обоих div должна быть 90vh.
В левом div мне нужно установить изображение, которое оно должно соответствовать, не затрагивая высоту и ширину изображения (я имею в виду, что изображение должно автоматически изменяться в соответствии с размером левого div)
В правом div мне нужно, чтобы отображался соответствующий текст.
Конечно, мне это нужно вся настройка настроена на оперативность.
Пожалуйста, посмотрите мой код HTML и CSS, который я пытаюсь использовать. Однако проблема, с которой я столкнулся, заключается в том, что размер изображения не изменяется автоматически - я теряю часть изображения сверху и снизу, как вы можете видеть на прикрепленном снимке экрана.
Пожалуйста, помогите!
Снимок экрана

Код: Выделить всё

#hero-section{
width: 100%;
height: 90vh;
margin-top: 10px;
display: flex;
}

#image-div{
width: 60%;
border: solid black 2px;
}

#hero-image{
width: 100%;
height: 100%;
object-fit: cover;

}

#hero-text{
width: 40%;
border: solid black 2px;
}

Код: Выделить всё

[img]ai-generated-8048681_1920.png[/img]

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quibusdam laboriosam ipsum alias, aliquam voluptatum in earum minus possimus eius commodi nobis natus saepe maiores nesciunt reprehenderit eligendi sequi? Velit?

Подробнее здесь: https://stackoverflow.com/questions/792 ... nd-an-iden