html - 通过 css 应用 img-fluid 或普遍适用于数据库提供的图像

Question

我有一个用作 CMS 的 Bootstrap 站点，以便用户可以选择布局并将图像拖到 DIV 容器中，这些容器是 Bootstrap 列，并保存它们以在数字显示器上显示。

我已经完成了大部分工作，但是如果他们将一个巨大的图像拖到列中，它就会脱离列，我想将 img-fluid 类应用于可能提供的任何图像从数据库导入模板

问题显然是我没有硬编码图像，它们保存在数据库中并用 HTML 包装。

如何将类普遍应用于所有图像？

这是一个使用的模板示例

html,
        body {
          height: 100vh;
          width: 100vw;
          overflow: hidden;
        }
img {
          max-width: 100%; 
          height:auto;
          margin:0 auto;
        }
.fullContent{
          display:flex;
          justify-content:center;
          align-items:center;
        }
.my-container {
          display: flex;
          flex-direction: column;
          justify-content: center;
          height: 100vh;
          width:100vw;
        }


<div class="container-fluid my-container d-flex h-100">
    <div class="row middle" id="middle">
        <div class="col-lg-12" id="fullColumn">
            <div class="fullContent" id="fullContent" style="height: 100%; ">
              <!--an image would be here-->
            </div>
        </div>
    </div>
</div>

Answer 1

您创建一个新的选择器并将.img-fluid 的 规则放入其中。像下面。CSS:

.fullContent > img{
    max-width: 100%;
    height: auto;
}

如果你正在使用 SCSS 就这样做

.fullContent > img{
       @include img-fluid;
}