0

I'm breaking my head about this, and cannot seem to solve it.

When I'm adding an image of 100px width to a desktop site, and apply the class w-100 to it, it should stretch to the width of the parent div (column in this case), right? That's how it works when you do this:

<div class="row">
    <div class="col-md-8">
        <img src="image-w100px.jpg" class="img-fluid w-100">
    </div>
    <div class="col-md-4">
    </div>
</div>

However if I try to do the same inside a flex div (to center/middle align the picture next to a large amount of text, it won't work

<div class="row">
    <div class="col-md-8 flex">
        <div class="align-self-center">
            <img src="image-w100px.jpg" class="img-fluid w-100">
        </div>
    </div>
    <div class="col-md-4">
        Large amount of text (picture on the left should vertically align.
    </div>
</div>

I have tried every combination (img-fluid alone, w-100 alone, combination of img-fluid and w-100, removing classes and adding style="width: 100% !important"), but none of the possibilities make my img expand further than it's original size, it'll compress/resize to a lower size, but not expand.

Why is this not working?

Taapo
  • 1,615
  • 4
  • 17
  • 31
  • No, just bootstrap - nothing else. And I can reproduce it using a boilerplate BS4 template. So it's not other code that's interfering. – Taapo Apr 19 '20 at 11:51
  • Unable to reproduce – Zim Apr 19 '20 at 11:52
  • I updated my question, as I didn't notice I had applied a flex class to the parent div. – Taapo Apr 19 '20 at 12:09
  • Flex is the issue: https://stackoverflow.com/questions/41774646/image-is-not-resizing-in-a-flexbox-layout – Zim Apr 19 '20 at 12:12

1 Answers1

0

After testing some more, I found a solution. Adding w-100 to the align-self-center class, it now works:

<div class="row">
    <div class="col-md-8 flex">
        <div class="align-self-center w-100">
            <img src="image-w100px.jpg" class="img-fluid w-100">
        </div>
    </div>
    <div class="col-md-4">
        Large amount of text (picture on the left should vertically align.
    </div>
</div>
Taapo
  • 1,615
  • 4
  • 17
  • 31