Can't figure how to properly center those images - html

Question

Hello everyone, I'm trying to setup the main content of the homepage as shown in the image but can't really figure a few things.
Somehow everything I try results in the image to overflow the container and be as big as the page. I don't want to set a fixed size for the image, but rather have it proportional to the view height and width
This is my code right now:
<section class="main">
<div class="main-left">
<div class="container">
<img src="assets/images/wine.png">
</div>
</div>
<div class="main-right">
<div class="container">
<img src="assets/images/oil.png">
</div>
</div>
</section>
.main {
display: flex;
background-color: #f1eee9;
height: 100%;
}
.main-left, .main-right {
display: flex;
flex-direction: row;
}
.main-left {
background-color: #111;
width: 50%;
}
.main-right {
background-color: #1f1f1f;
width: 50%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
width: 80vw;
height: 80vw;
}
.container img {
display: block;
width: 100%;
height: 100%;
}
I haven't yet added the text so it would be REALLY helpful if you could suggest how to do that as well..

Answer 1

You should use : object-fit: cover;
which is documented here : https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
With your exemple I made that (changed container height to 80vh and not vw)
.main-left, .main-right {
display: flex;
flex-direction: row;
}
.main-left {
background-color: #111;
width: 50%;
}
.main-right {
background-color: #1f1f1f;
width: 50%;
}
.container {
width: 80vw;
height: 80vh;
background-color: blue;
}
.container img {
display: block;
width: 100%;
height: 100%
object-fit: cover;
}

Answer 2

You can optimize your code like below it got correct:
<section class="main">
<div class="main-left">
<img src="assets/images/wine.png">
</div>
<div class="main-right">
<img src="assets/images/oil.png">
</div>
</section>
.main {
display: flex;
flex-direction: row;
}
.main-left , .main-right{
flex: 1;
}
.main-left {
background-color: #111;
}
.main-right {
background-color: #1f1f1f;
}
.main > div img {
display: block;
width: 100%;
height: 100%
object-fit: cover;
}