css - 如何在图像上设置 block 和文本并完全响应

Question

我正在使用 flexbox 从 PSD 文件制作一个网站。我需要像下面这样创建 block 。我想知道如何使用 img 标签设置这些图片或将它们设置为背景图像以完全响应？我也不知道如何设置文本“活跃用户(34)”和“使用的产品(658)”。我尝试使用绝对和相对位置，但在较小的分辨率下它运行图像......

我的代码:

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 100%;
}

.blocks {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.blocks__text {
  width: 33%;
  height: 100%;
  background-color: white;
  text-align: center;
  padding: 40px;
}

.blocks__text h1 {
  color: #fd634e;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.blocks__text h2 {
  color: #a2ca28;
  font-family: 'Open Sans', sans-serif;
  font-size: 35px;
  font-weight: 300;
  line-height: 30px;
  padding: 10px;
}

.blocks__text p {
  color: #656e74;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
}

.blocks__text img {
  padding: 10px;
}

.blocks__text a {
  color: #a2ca28;
  font-size: 14px;
  font-weight: 400;
  line-height: 26px;
}

.blocks__image {
  width: 67%;
  background-size: 100% 100%;
}

.blocks__bg1 {
  background-image: url('../images/fitnessFirst.png');
}


.blocks__image p {
  color: #f7614c;
  font-family: "Open Sans";
  font-size: 12px;
  font-weight: 400;
  line-height: 26px;
  margin-right: 15px;
}

.blocks__users {
  position: relative;
  height: 100%;
  top: 50%;
  left: 60%;
}

.blocks__users p span {
  color: white;
}

@media (max-width: 768px) {
  .blocks__text {
    width: 100%;
  }
  .blocks__image {
    width: 100%;
    height: 25em;
  }
}

.blocks2 {
  flex-wrap: wrap-reverse;
}

.blocks__bg2 {
  background-image: url('../images/yourBody.png');
}

.blocks__users2 {

}

.blocks__users2 p{
  color: white;
}

<div class='container'>
                    <article class= 'blocks'>
                        <div class='blocks__text'>
                            <h1>IT'S ALL ABOUT</h1>
                            <h2>FITNESS FIRST</h2>
                            <img src='images/whiteShape.png'>
                            <p>Cras et dolor libero. Aenean luctus accumsan enim quis finibus. 
                                Sed id mattis leo. Nulla nulla turpis, 
                                condimentum eu felis eu, consequat volutpat orci.
                                Maecenas lacus justo, fermentum eu pulvinar quis, posuere vel velit.
                            </p>
                            <a href="#">Read More</a>
                        </div>

                        <div class='blocks__image blocks__bg1'>
                            <div class='blocks__users'>
                                <p>Active Users <span>(34)</span></p>
                                <img src="images/orangeShape.png">
                            </div>
                        </div>
                    </article>

                    <article class= 'blocks blocks2'>
                            <div class='blocks__image blocks__bg2'>
                                    <div class='blocks__users2'>
                                        <p>Products USed <span>(658)</span></p>
                                        <img src="images/orangeShape.png">
                                    </div>
                                </div>

                            <div class='blocks__text'>
                                <h1>LOVE YOUR BODY</h1>
                                <h2>YOUR BODY</h2>
                                <img src='images/whiteShape.png'>
                                <p>Cras et dolor libero. Aenean luctus accumsan enim quis finibus. 
                                    Sed id mattis leo. Nulla nulla turpis, 
                                    condimentum eu felis eu, consequat volutpat orci.
                                    Maecenas lacus justo, fermentum eu pulvinar quis, posuere vel velit.
                                </p>
                                <a href="#">Read More</a>
                            </div>
                        </article>
                </div>

知道如何使白色方 block 和绿色方 block 始终保持相同的高度吗？？

Answer 1

<div class='blocks__image blocks__bg1'>
    <div class='blocks__users'>
       <img src="../images/fitnessFirst.png" alt=""/>
       <p>Active Users <span>(34)</span> <img src="images/orangeShape.png"></p>
    </div>
</div> 

并设置这个样式

.blocks__users {position: relative;}
.blocks__users p {position: absolute; bottom: 40px; right: 30px}