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

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 >
        
        <div >
            <div >
                <img src="assets/images/wine.png">
            </div>
        </div>

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

CodePudding user response：

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;
  }

CodePudding user response：

You can optimize your code like below it got correct:

<section >
        
        <div >
            <img src="assets/images/wine.png">
        </div>

        <div >
             <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;
  }