Как сделать так, чтобы div реагировал в другом адаптивном div без медиа-запросов? - PullRequest
Новая
       95

Как сделать так, чтобы div реагировал в другом адаптивном div без медиа-запросов?

0 голосов
/ 20 июня 2020

У меня есть квадратный div, который реагирует (он остается квадратом на всех устройствах). Мне нужно добавить в него еще один div, и мне также нужно, чтобы он реагировал. Я никоим образом не добиваюсь этого и не думаю, что мне для этого нужны медиа-запросы. Я явно делаю что-то не так, но не могу это закрепить.

Вот чего мне нужно добиться:

enter image description here

Here's my code or my 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>

1 Ответ

0 голосов
/ 20 июня 2020

Вы можете просто создать два divs внутри одного div и сделать следующее: 

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