对于各种类型的图片，可以使用object-fit属性。

像这样添加CSS：

.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>

您可以在这里找到有关object-fit和object-position的详细信息：https://css-tricks.com/on-object-fit-and-object-position/

您需要在包含图像的div上设置高度或最大高度，否则它们将适应其内容（图像）的高度。由于您已将图像设置为占用100%的宽度和高度，并且没有约束其父级，因此它们将根据原始图像大小尽可能地变大。
例如：

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

你可以给予所有的容器一个相同的类（例如：fixed-height-bg）来更容易地设计它们。
另请注意：您不需要为不同的屏幕大小为您的列提供单独的类，因为它们总是占据相同的比例。所以，你可以用

<div class="col-3">
        <div class="circle_bg">
            <img src="myImage3.png" class="IDE_div" />
        </div>
    </div>

编辑添加：如果你想让图片保持它们的比例，你需要改变你的css看起来像这样：

img {
  height: 100%; /* height of the parent container if specified, or of the image itself */
  width: auto; /* will maintain the proportions of the image */
}

您也可以将这些值切换为高度：auto; width：100%;如果你想让图像采取全宽度。