Can't figure out why my pictures wont get bigger-CodePudding

I've been trying to get these pictures to become more prominent, but nothing I've done works. I want this: desired result

but I'm getting this: what I have I've tried messing with width and height, and I thought it was the container causing the issue, but I couldn't find anything there.

Could anyone help me figure out why this is happening and how to prevent this in the future?

Here's the code:

#pop-rec {
  padding-top: 10rem;
}

.pop-rec-wrapper {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.pop-rec-left {
  display: flex;
  gap: 1rem;
}

.pop-rec-item {
  background-color: var(--primary-50);
  padding: 1.2rem;
  padding-top: 5rem;
  border-radius: 12px;
  /*width: 45%*/
  margin: 0 auto;
}

.pop-rec-item-img {
  margin-top: calc(-50% - 2rem);
  margin-bottom: 1.0rem;
  border-radius: 12px;
  width: 100%;
}

.pop-rec-item-img img {
  object-fit: cover;
}

.pop-rec-item-title {
  font-size: 1.4rem;
  color: #360215;
  font-weight: 600;
  margin-bottom: 1rem;
}

.pop-rec-itme-totaltime {
  color: var(--primary-600);
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.pop-rec-img1 .pop-rec-img2 {
  height: max-content;
  width: max-content;
}

<section id="pop-rec">
  <div >
    <div >
      <div >
        <div >
          <div >
            <img src="./shaif-s-cuisine-starter_files/images/delish-210419-iced-tea-02-landscape-jg-1619020612.jpg" alt="food img"  />
            <h2 >
              Southern Style Sweet Tea
            </h2>
            <h3 >TOTAL TIME: 20 mins</h3>
          </div>
          <p >
            Every gal in the south has her way of making sweet tea. We're pretty proud about it, too. Around my house, we like our tea strong and sweet. So if you ever have trouble getting your tea just right every time, give this recipe a try.
          </p>
        </div>
        <div >
          <div >
            <img src="./shaif-s-cuisine-starter_files/images/collard-greens-full.jpg" alt="food img"  />
          </div>
          <h2 >
            Grandma's Collard Greens
          </h2>
          <h3 >TOTAL TIME: 3 hours 15 minutes</h3>
          <p >
            These authentic Southern Collard Greens are braised in savory meat flavored and perfectly spiced pot liquor resulting in a fantastic tender silky texture!!! Serve with this cornbread or corn muffins and hot sauce for an authentic home meal. Are you looking
            for the real deal? This is a true Southerner’s dream!
          </p>
        </div>
      </div>
      <div >
        <h2 >Popular Recipes</h2>
        <p >
          Our weekly trending recipes.
        </p>
        <a href="./recipes.html" >Explore more</a>
      </div>
    </div>
  </div>
</section>

CodePudding user response：

A bit hard to debug, but can you try adding this or updating your class.

.pop-rec-item-img img{
 object-fit: cover;
 display: block;
}

CodePudding user response：

Neat! It looks like the only content that is off is your image, right? So I would target the image directly by doing either

img { width: 100%; }

Or, be more specific by pairing with your class (recommended so as to not mess with all your website's images)

.pop-rec-item img { width: 100%; }

I would also recommend removing margin-top: calc(-50% - 2rem); which is pushing your image up and out of your pink box

I also suspect that the padding of the parent divs may be what is forcing the image to be so small. On your web browser, you can right click and select inspect to visually see where padding is on your element