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

Posted 2023-02-21

【中文标题】如何将图像放在父 div 中，它应该等于 div 的底部

【英文标题】：How can I put image inside parent div and it should be equal to bottom of 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"  />
    <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 的底部对齐。

【参考方案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"   />
    <div class="get-excircle"></div>
  </div>
</div>

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

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

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

【讨论】：

它不工作:(

@AyZed 试试代码 sn-p