How do I make my image in a flexbox row stretch to the maximum width of my container-CodePudding

I have an image that I would like to stretch itself out so there is no whitespace on the right whilst maintaining its aspect ratio and just cutting some of the image out of view. I also want to have the image the same size as the blue container. I tried some solutions on here such as setting the max width of the image to 100% and using object-fit: cover I but haven't figured it out yet.

* {
  margin: 0px;
  padding: 0px;
}

.see-bike-rides-card {
  display: flex;
  max-height:400px;
}

.home-card-text {
  background: #80D0E5;
  padding: 1rem;
}

.see-bike-rides-card {
  max-height: 400px;
  width: 1000px;
}

.see-bike-rides-card img {
  width: fit-content;
  max-height:400px;
  object-fit: cover;

}

<article >

  <section >
    <h2>Coolest Bike Rides in Brisbane</h2>
    <p>Check out our favourite spots
      to ride your bike in Brissy.</p>
    <div>
      <a href="#" >See Bike Trails</a>
    </div>
  </section>
  <section>
    <figure>
      <img src="https://images.unsplash.com/photo-1515722265856-49cdff079949?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8" alt="">
    </figure>
  </section>
</article>

CodePudding user response：

If you set the sections to be 50% width so they are equal, then set the figure to be 100% height & width to fill the space, with object-fit cover will get the image to fill the area.

* {
  margin: 0px;
  padding: 0px;
}

.see-bike-rides-card {
  display: flex;
  width: 100vw;
  height: 100vh
}

.see-bike-rides-card section {
  width: 50%;
}

.home-card-text {
  background: #80D0E5;
  padding: 1rem;
}

.see-bike-rides-card figure {
  display: flex;
  width: 100%;
  height: 100%;

}
.see-bike-rides-card img {
  object-fit: cover;
    width: 100%;
    margin: auto;
  height: 100%;
}

<article >

  <section >
    <h2>Coolest Bike Rides in Brisbane</h2>
    <p>Check out our favourite spots
      to ride your bike in Brissy.</p>
    <div>
      <a href="#" >See Bike Trails</a>
    </div>
  </section>
  <section>
    <figure>
      <img src="https://images.unsplash.com/photo-1515722265856-49cdff079949?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8" alt="">
    </figure>
  </section>
</article>

CodePudding user response：

.see-bike-rides-card

Change max width to 100% as well.

CodePudding user response：

  <img src="https://images.unsplash.com/photo-1515722265856-49cdff079949?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8" style="max-width=100%; object-fit:contain"alt="">

Using inline-style will only solve the problem you can use max-width or width