防止（引导）附加图像调整大小

Question

一旦用户滚动过去，我正在使用 Bootstrap 附加插件将 img 附加到视口的顶部。

我将 .img-fluid 类应用于 img，并且 img 位于一个 3 列容器中。

词缀有效，但是当图像词缀时，它变得巨大。我不想为其设置 px 宽度，因为我希望图像大小随视口而变化——并且我希望它保持与 3 列容器中相同的大小。

我尝试改为固定 3 列容器，但随后它改变了位置！

Hayulllppp 请！这是 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

您在px 中指定宽度。 img-fluid 类使图像具有响应性，如果图像对于视口来说太大，它将缩小图像。