[![What I want to achieve](https://i.stack.imgur.com/aRkvl.jpg)](https://i.stack.imgur.com/aRkvl.jpg)

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..