I have been attempting to design a column that is divided into two nested columns, each containing images that should fill the entire height and width of their respective columns. However, I am facing an issue where the images are extending beyond the boundaries of the div element that contains them.
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
<img class="fitimages" src="./images/pic1.jpg">
</div>
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
<img class="fitimages" src="./images/pic2.jpg">
</div>
.fitimages{
max-width: 100%;
max-height: 100%;
}
I applied max-width and max-height properties in order for the images to fit within the parent div correctly, but one image does not cover the full width and height while the other extends outside of its container.