如何将图像放在父 div 中，它应该等于 div 的底部

Question

大家好.. 我正在努力将这张图片放入蓝色背景的 div 中。 图像底部应等于父 div。 我怎么解决这个问题。

提前致谢！！！ HTML

 <div class="get-experience">
  <div class="get-exbg"></div>
  <div class="get-extext">
    <h2>Get experience from the expert</h2>
    <p>
      Quid ex eo ortum, tam inportuno tamque crudeli; sin, ut aliquid ex
    </p>
    <button>Contact Us</button>
  </div>
  <div class="get-exphoto">
    <img src="img/woman.png" alt="" />
    <div class="get-excircle"></div>
  </div>
</div>

CSS

  .get-experience {
  width: 100%;
  max-width: 1440px;
  margin: 40px auto;
  display: flex;
  overflow: hidden;
  position: relative;
  height: auto;
}

.get-exbg {
  z-index: -1;
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 0;
  border-top: 120px solid transparent;
  border-right: 50px solid #58bebf;
  border-bottom: 25px solid #58bebf;
  border-right-width: 1440px;
  border-bottom-width: 370px;
}

.get-extext {
  color: #fff;
  top: 50%;
  margin: auto 175px auto 165px;
  position: relative;
}

.get-exphoto img {
  position: relative;
}

Answer 1

您可以通过在 CSS 文件或样式标签的末尾添加以下内容来解决此问题：

.get-exphoto {
        display: flex;
        align-items: flex-end;
    }

这意味着 img 标记的父级将具有弹性显示，并且内部的任何子级都将垂直对齐到末尾。

Answer 2

如果您可以添加一个 codepen 链接会更容易，但我可以告诉您需要将高度 100% 添加到您的图像，如下所示：

.get-exphoto img {
  position: relative;
  height: 100%;
}