Image not showing up correctly when In my left container-CodePudding

So I'm relatively new to Css and trying to learn it by doing some projects , I'm almost through with this one , but the thing that I'm not getting right is that the image is not taking up the same height as that of the left div , why is this so , even though I have set the height of left container to be 100% of the main container

I'm attaching the code for your reference

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  
  <title>Frontend Mentor | Product preview card component</title>

</head>
<body>
  <section >
    <div >
      <div >
        <img src="images/image-product-mobile.jpg">
      </div>
      <div >
        <h5>PERFUME</h5>
        <h1>Gabrielle Essence Eau De Parfum</h1>
        <p >A floral, solar and voluptous interpretation composed bu oliver polge,Perfumer-Creator for the house of chanel</p>
        <div >
          <h1 >$149.99</h1>
          <p >$169.99</p>
        </div>
      <button >
        <i  style="font-size:16px"></i> Add To Cart
      </button>

    </div>
  </section>


</body>
</html>

CSS

@import url(https://fonts.google.com/specimen/Fraunces);
@import url(https://fonts.google.com/specimen/Montserrat);
:root{

    --Dark-cyan:hsl(158, 36%, 37%);
    --Cream:hsl(30, 38%, 92%);
    --Very-dark-blue: hsl(212, 21%, 14%);
    --Dark-grayish-blue: hsl(228, 12%, 48%);
    --White: hsl(0, 0%, 100%)

}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-size:14px;
    background-color: var(--Cream);
    color:black;
}
.container{
    background-color: var(--White);
    width:33%;
    height:33%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin:4rem auto;
}


.left-side{
    width: 50%;
    background-size: cover;
    background-position: center;
    height: 100%;
    overflow: hidden;

}
.left-side img{
    width:100%;
    object-fit: cover;


}
.right-side{
    width: 50%;
    height: 100%;
    padding: 2rem;
}
h5{
    font-family:"Montserrat", sans-serif;
    font-weight:500;
    letter-spacing: 0.4rem;
    color:var(--Dark-grayish-blue);
    margin:0 0 2em 0 ;
    
}
h1{
    font-family:"Fraunces", serif;
    font-weight:700;
    letter-spacing: 0.07rem;
}
.content{
    font-family:"Fraunces", serif;
    font-weight:500;
    color:var(--Dark-grayish-blue);
    margin:1.75em 0;
    line-height:1.5;

}
.prices{
    font-family:"Fraunces", serif;
    display: inline;
    margin:0 0.5em;
}
.old-price{
    text-decoration:line-through;
}
.new-price{
    font-weight:700;
    color: var(--Dark-cyan);
}
.btn{
    padding: 0.5em 1.8em;
    background-color: var(--Dark-cyan);
    color: var(--White);
    width:95%;
    border:none;
    border-radius:5px;
    cursor:pointer;
    margin:1.75em 0 0 0;
}
.btn:hover{
   opacity:0.5;
}

CodePudding user response：

.left-side{
    width: 50%;
    background-size: cover;
    background-position: center;
    height: 100%;
    overflow: hidden;

}
.left-side img{
    width:100%;
    object-fit: cover;

Only thing i can think of is that you have given it two different properties, try combining these in the same css stack

CodePudding user response：

.container {
    /* ... */
    align-items: stretch; /* Add this line */
}

.left-side {
    /* ... */
    /* Add these two lines: */
    min-height: 100%;
    background-image: url("images/image-product-mobile.jpg");
}

Also, remove the <img /> from the left-side div; now it's on the CSS (.left-side), so you can cover and center the background.