Prevent (Bootstrap) affixed image from resizing

Question

I'm using the Bootstrap affix plugin to affix an img to the top of the viewport once the user scrolls past it.

I have the .img-fluid class applied to the img, and the img is housed within a 3-column container.

The affix works, but when the image affixes, it gets HUGE. I don't want to set a px width for it because I want the image size to flex with the viewport -- and I want it to stay the same size as it is in the 3-column container.

I tried affixing the 3-column container instead, but then it changes positions!

Hayulllppp pls! Here's the HTML + CSS FWIW...

    <div class="col-sm-12 col-md-3 sms">
    <img src="img/sms/ch1_aug24_dad_sms1.png" data-spy="affix" data-offset-top="300" class="img-fluid">
    </div>

    .sms img {
         margin:1rem 0rem;
         max-width:100%;
          }
    .affix  {
    position:fixed;
    top:.5rem;
    z-index:9999;
          }

Answer 1

You specify the width in px. The img-fluid class makes the image responsive in the way that it will scale down the image if it is too big for the viewport.