Image not showing up correctly when In my left container

Kannav02 0
Viewed 44

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

@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;
}
<!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 class="main-body">
    <div class="container">
      <div class="left-side">
        <img src="https://images.unsplash.com/photo-1611915387288-fd8d2f5f928b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80">
      </div>
      <div class="right-side">
        <h5>PERFUME</h5>
        <h1>Gabrielle Essence Eau De Parfum</h1>
        <p class="content">A floral, solar and voluptous interpretation composed bu oliver polge,Perfumer-Creator for the house of chanel</p>
        <div class="price">
          <h1 class="new-price prices">$149.99</h1>
          <p class="old-price prices">$169.99</p>
        </div>
        <button class="btn">
        <i class="fa fa-shopping-cart" style="font-size:16px"></i> Add To Cart
      </button>

      </div>
  </section>


</body>

</html>

css html
2 Answers
.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

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

.left-side {
    /* ... */
    height: 100%; /* <- Remove this line */

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

Demo: https://jsfiddle.net/adqb1v8r/

Eric Fortis0
Related