How to have fixed div height irrespective of image height within it - css

Question

I have a row with three coloumns. I want to have a image on each coloumn's divs with same height irrespective of image size in each div.
I want the images to get resized with in a div. But i get different size of divs as the image size of myImage1.png, myImage2.png and myImage3.png is different.
This is happening because i have fixed padding in my 'bg' class. Can somebody help me to fix this? Below is my HTML and CSS code.
<div class="row IDE_container">
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="bg">
<img src="myImage1.png" class="IDE_div" />
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="circle_bg circle_bg_sm">
<img src="myImage2.png" class="IDE_div" />
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="circle_bg">
<img src="myImage3.png" class="IDE_div" />
</div>
</div>
</div>
.bg{
background-color: #ededed;
border-radius: 100%;
text-align: center;
padding: 35% 5%;
width: max-content;
max-width: 100%;
box-shadow: 0 0 3px 1px #DDD;
}
.IDE_div {
display: inline-block;
position: relative;
width: 100%;
height: 100%;
}
.IDE_container {
display: flex;
align-items: baseline;
}

Answer 1

For various kind of images, so can use object-fit property.
Add the CSS like this:
.IDE_div{
width: 100%;
object-fit: cover;
height: 300px; /* only if you want fixed height */
}
<div class="col-3">
<div class="circle_bg">
<img src="myImage3.png" class="IDE_div" />
</div>
</div>
You will find the details about object-fit and object-position here : https://css-tricks.com/on-object-fit-and-object-position/

Answer 2

You need to set a height or max-height on the divs containing the images, or they will adapt to the height of their content (the images). As you've set the images to take up 100% width and height, and haven't constrained their parents, they will get as large as they can based on the original image size.
So, for example :
.IDE_container {
display: flex;
align-items: baseline;
div.col-3 {
div {
height: 200px;
.IDE_div {
display: inline-block;
position: relative;
width: 100%;
height: 100%;
&::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: var(--val);
padding-bottom: var(--val);
transform: translate(-50%, -50%);
z-index: -1;
border-radius: 50%;
}
}
}
}
}
You could give all containers the same class (e.g. fixed-height-bg) to style them more easily.
Also note: You don't need to give your columns individual classes for different screen sizes, as they always take up the same proportion. So, you can just use
<div class="col-3">
<div class="circle_bg">
<img src="myImage3.png" class="IDE_div" />
</div>
</div>
EDITED to add: if you want the images to maintain their proportions, you need to change your css to look like this:
img {
height: 100%; /* height of the parent container if specified, or of the image itself */
width: auto; /* will maintain the proportions of the image */
}
You can also switch those values, to height: auto; width: 100%; if you want the images to take the full width.