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

Question

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 class="see-bike-rides-card">

  <section class="home-card-text">
    <h2>Coolest Bike Rides in Brisbane</h2>
    <p>Check out our favourite spots
      to ride your bike in Brissy.</p>
    <div>
      <a href="#" class="button">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>

Is object-fit: fill meet your demand?

flyingfox
– flyingfox

2022-10-06 03:30:26 +00:00
Commented Oct 6, 2022 at 3:30 — flyingfox
– flyingfox, Commented Oct 6, 2022 at 3:30
i tried it but it sadly didn't change anything.

Blair A
– Blair A

2022-10-06 03:37:19 +00:00
Commented Oct 6, 2022 at 3:37 — Blair A
– Blair A, Commented Oct 6, 2022 at 3:37

ngearing · Accepted Answer · 2022-10-06 04:14:54Z

1

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 class="see-bike-rides-card">

  <section class="home-card-text">
    <h2>Coolest Bike Rides in Brisbane</h2>
    <p>Check out our favourite spots
      to ride your bike in Brissy.</p>
    <div>
      <a href="#" class="button">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>

edited Oct 6, 2022 at 4:14

answered Oct 6, 2022 at 3:44

ngearing

1,36512 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Blair A Over a year ago

when you run this code by clicking expand snippet unfortunately it is not filling the screen

ngearing Over a year ago

Thats just the height of the .see-bike-rides-card, change the min-height/max-height values to get what you want.

Blair A Over a year ago

it is the width, i can share a picture if you need

ngearing Over a year ago

I just added 100vh to the .see-bike-rides-card it will now fill the screen.

The lol frog · Accepted Answer · 2022-10-06 03:54:32Z

0

In

.see-bike-rides-card

Change max width to 100% as well.

edited Oct 6, 2022 at 3:54

answered Oct 6, 2022 at 3:32

The lol frog

155 bronze badges

1 Comment

Blair A Over a year ago

with width at 100% it doesnt change anything. You have to click the expand snippet button to see the code snippet in full screen I should have stated that in the post sorry

41 72 6c · Accepted Answer · 2022-10-10 16:10:53Z

0

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

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

edited Oct 10, 2022 at 16:10

41 72 6c

1,7786 gold badges25 silver badges37 bronze badges

answered Oct 6, 2022 at 3:59

ojoe928

11 bronze badge

1 Comment

ojoe928 Over a year ago

Try the inline-style I added to the image

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related