如何在没有媒体查询的情况下使 div 在另一个响应式 div 中响应？

Question

我有一个响应式的方形 div（在所有设备中它仍然是一个方形）。我需要在其中添加另一个 div，并且我也需要它具有响应性。我没有以任何方式实现这一点，我认为我不需要为此进行媒体查询。我显然做错了什么，但无法固定它。

这是我需要达到的目标：

这是我的代码或我的Codepen

.image-exists {
        width: 100%;
        padding-bottom: 100%;
        background-size: cover;
        background-position: center;
        background-image: url(https://icatcare.org/app/uploads/2018/07/Finding-homes-for-your-kittens-1.png);
        border: 2px solid #8ABE57;
        border-radius: 0.25rem;
    }

    .cover-image-flag:before {
        content: "Text here";
        position: absolute;
        bottom: 0;
    left:0;
        background: #8ABE57;
        padding: 5px;
    text-align: center;
    font-size: 1em;
    width: 100%;
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet"/>   
<div class="col-lg-4 col-md-4 col-sm-5 col-xs-6 col-6 img-holder cover-image-flag">
  <a href="#" class="delete-img-button">
    <i class="fas fa-circle fa-stack-2x delete-img-circle"></i>
    <i class="fas fa-times fa-stack-1x delete-img-icon"></i>
  </a>
  <div class="image-exists"></div>
</div>

Answer 1

您可以简单地在一个div 中创建两个divs 并执行以下操作：

.img-holder {
  background: #8ABE57;
  padding: 4px;
  border-radius: 0.35rem;
}

.image-exists {
        position:relative;
        width: 100%;
        padding-bottom: 100%;
        background-size: cover;
        background-position: center;
        background-image: url(https://icatcare.org/app/uploads/2018/07/Finding-homes-for-your-kittens-1.png);
        
    }
.cover-image-text {  
    text-align: center;
    color: #fff;
    width: 100%;
    background: #8ABE57;
    font-size: 24px;
    position: absolute;
    bottom:0px;
    padding: 1px;
}

<div class="col-12">

<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-2 img-holder cover-image-flag">
  <a href="#" class="delete-img-button">
    <i class="fas fa-circle fa-stack-2x delete-img-circle"></i>
    <i class="fas fa-times fa-stack-1x delete-img-icon"></i>
  </a>
  <div class="image-exists">
    <div class="cover-image-text">Test</div>
  </div>
  
</div>
  
</div>