Currently, I am working on a bootstrap site that operates as a CMS. This allows users to select a layout and drag images into DIV containers (bootstrap columns) for the purpose of saving and displaying them on digital displays.
Although most functionalities are operational, there is an issue when a large image is dragged into a column, causing it to overflow. To address this, I aim to automatically apply the img-fluid class to any images retrieved from the database and inserted into the template.
The main challenge lies in the fact that the images are not hardcoded; instead, they are stored in the database and wrapped in HTML tags.
How can I implement the class universally to all images?
Below is an example of the template structure:
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>