Применение img-Fluid по CSS или универсально для базы данных предоставленных изображений

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;
}