Question

我有一个引导站点用作CMS，以便用户可以选择布局并将图像拖到DIV容器（即引导列）中，并将其保存以显示在数字显示器上。

我已经完成了大多数工作，但是如果它们将一个巨大的图像拖到该列中，则该列会跳出该列，并且我想将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's规则放入其中。像下面 CSS：

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

如果您正在使用SCSS，请执行此操作

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

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

1 个答案: