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

【问题标题】：How can I put image inside parent div and it should be equal to bottom of div如何将图像放在父 div 中，它应该等于 div 的底部
【发布时间】：2022-01-21 03:16:17
【问题描述】：

大家好！！我正在努力将此图像放入蓝色背景的 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;
}

【问题讨论】：

margin-top 或垂直对齐应该在父 div 的底部对齐。

标签： html css position display

【解决方案1】：

如果您可以添加一个 codepen 链接会更容易，但我可以告诉您，您需要像这样为您的图像添加 100% 的高度：

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

【讨论】：

这仅在父元素具有设定高度时才有效。

【解决方案2】：

 .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;
}
.get-exphoto {
        display: flex;
        align-items: flex-end;
    }

 <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="https://png.pngtree.com/png-vector/20190307/ourmid/pngtree-vector-programming-icon-png-image_757435.jpg" width="50px" alt="" />
    <div class="get-excircle"></div>
  </div>
</div>

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

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

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

【讨论】：

它不工作:(
@AyZed 试试代码 sn-p