如何在将页面大小调整为固定大小或按比例拉伸时制作（图像填充的）div？

Question

到目前为止，我所做的基本上是我得到了我想要的基本布局。但问题是，当我调整页面大小时，图像填充的 div（childInnerDiv 左）也不断变形。我希望配置文件 div 基本上保持固定或至少按比例拉伸。我认为问题在于我正在使用 flexbox，它最终会拉伸......但我不确定如何在没有 flexbox 的情况下以正确的比例创建布局。我使用了 position: fixed，但这会弄乱布局。

还有其他问题，我不能使用锚标签链接到其他网站，我必须使用 css 属性（背景图像：url（））。还有 JSFiddle，让 UI 看起来也不同..

我想要什么： 注意图像应该是圆形的，下面没有描述。

网站用户界面（我使用 React、HTML、CSS 所拥有的）

JSFiddle： https://jsfiddle.net/ad60k98n/53/

CSS

.ProjectsParentDiv {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: max-width;
    height: 40%;
    border: 1px solid black;
}

.childDiv {
    align-items: center;
    display: flex;
    justify-content: space-around;
    background-color: lightblue;
    width: 60%;
    height: 25%;
    margin: 5px auto;
    z-index: 1;
}

.childInnerDiv {
    display: flex;
    height: 95%;
    z-index: 2;
}


.childInnerDiv.left {
    width: 15%; 
    height: 80%;
    border-radius: 50%;
    overflow: hidden;
    z-index: 3;
    position: relative;
    transition: transform 250ms;
}

.childInnerDiv.left:hover {
    transform: translateY(-10px);
}

.imageCoveringDiv {
    z-index: 4;
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.childInnerDiv.right {
    height: 80%;
    width: 65%;
    margin-right: 5%;
    background-color: red;
    text-align: center;
    border: 1px solid silver;
    display: block;
}

.childInnerDiv span {
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

/* ChildInnerDiv(s) for images. */
#HorusDiv {
    background-image: url("Some Link");
    background-color: black;
    background-size: cover;
    background-repeat: no-repeat;
} 

#LH3000Div {
    background-image: url("Some Link");
    background-color: black;
    background-size: cover;
    background-repeat: no-repeat; 
}

#RandomDiv {
    background-image: url("Some Link");
    background-color: black;
    background-size: cover;
    background-repeat: no-repeat; 
}

HTML

<div class="ProjectsParentDiv">

  <div class="childDiv">
    <div class="childInnerDiv left" id="HorusDiv">
      <a href="Some Link">
        <img class="imageCoveringDiv" id="HorusImg" href="/client/src/Assets/horus.png" />
        Some Image
      </a>
    </div>

    <div class="childInnerDiv right">
      <span class="DescriptionDiv">
        <b>Project 1:</b> Some Description
      </span>
    </div>
  </div>

  <div class="childDiv">
    <div class="childInnerDiv left" id="LH3000Div">
      <a href="Some Link">
        <img class="imageCoveringDiv" id="LH3000Img" href="/client/src/Assets/horus.png" />
        Some Image
      </a>
    </div>

    <div class="childInnerDiv right">
      <span class="DescriptionDiv">
        <b>Project 2:</b> Some Description
      </span>
    </div>
  </div>

  <div class="childDiv">
    <div class="childInnerDiv left" id="RandomDiv">
      <a href="Some Link">
        <img class="imageCoveringDiv" id="RandomImg" href="/client/src/Assets/horus.png" />
        Some Image
      </a>
    </div>

    <div class="childInnerDiv right">
      <span class="DescriptionDiv">
        <b>Project 3:</b> Some Description
      </span>
    </div>
  </div>

</div>

Answer 1

为了让事情顺利进行，我添加了以下属性：

flex-grow: 0;
flex-shrink: 0;
min-height: 100px;
min-width: 100px;
max-height: 100px;
max-width: 100px;

希望它可以帮助您前进。 https://jsfiddle.net/tilwinjoy/9t1ns2xe/