I have been using bootstrap templates that allow users to create displays with images and text. I previously added max-width:100% and height:auto to the img CSS, thinking it would resolve issues with large images breaking the container.
However, when inserting a massive image, it still disrupts the container.
My goal is to enable users to drag an image into this container while ensuring it fits perfectly every time.
What am I missing here?
img {
max-width: 100%;
height:auto;
margin:0 auto;
}
#topLeftContent{
display:flex;
justify-content:center;
align-items:center;
}
#bottomLeftContent{
display:flex;
justify-content:center;
align-items:center;
}
#rightQtrContent{
display:flex;
justify-content:center;
align-items:center;
}
<div class="container-fluid my-container d-flex h-100">
<div class="row middle" id="middle" style="background-image: url();">
<div class="col-lg-6" id="leftColumnQtr">
<div class="row" style="height:50%; padding-bottom: 15px;">
<div class="col-lg-12" style="height:100%;">
<div id="topLeftContent" style=" height: 100%; ">
</div>
</div>
</div>
<div class="row" style="height:50%; padding-top: 15px;">
<div class="col-lg-12" style="height:100%;">
<div id="bottomLeftContent" style=" height: 100%;">
<img src="https://via.placeholder.com/1500x700">
</div>
</div>
</div>
</div>
<div class="col-lg-6" id="rightColumnQtrHalf" >
<div id="rightQtrContent" style=" height: 100%; ">
</div>
</div>
</div>
</div>