图片没有响应 margin-bottom

Question

我正在编码的这个网站有一个 header 和一个投资组合。我希望 "avatar" 的人在投资组合中占一半。基本上，我希望头像图像始终占投资组合的 50% div。该页面是响应式的，因此它会相应地缩小。然而，相应的头像图像 shrinks/resizes； margin-bottom 不保持相同的比例。我总是希望它比下一个 div 低 50%。这是动图。它的开始是我想要的，当我调整大小时看。谢谢

https://imgur.com/a/nL6m9ow

这是我的代码

body {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
}

.avatar img {
  width: 100%;
  margin-bottom: -100px;
}

<div class="avatar">
  <img src="images/portfolio-avatar.png" class="banner">
</div>
<div class="portfolio">
  <img src="images/banner.png" class="banner">
</div>

Answer 1

body{
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
}
.avatar {
  position: relative; 
  padding-top: 100px;
}
.avatar img{
    max-width: 100px;
  position:absolute;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
    
}

.portfolio img {
  max-width: 100%;
}

<div class="avatar">
            <img src="https://www.ienglishstatus.com/wp-content/uploads/2018/04/Sad-Profile-Pic-for-Whatsapp.png" class="banner">
        </div>
        <div class="portfolio">
            <img src="https://about.canva.com/wp-content/uploads/sites/3/2015/02/Etsy-Banners.png" class="banner">
        </div>

检查此代码，或者您也可以在此处检查。找到 codepen 的 link。 https://codepen.io/atulraj89/pen/qQQBMm

调整大小 window 并享受

Answer 2

如果您使用相对单位 (%) 作为头像的宽度，以及 padding-top，它将相应地 grow/shrink。

body {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
}

.avatar {
  position: relative;
  padding-top: 7.5%;
}

.avatar img {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15%;
  border-radius: 50%;
  border: 6px solid white;
}

.portfolio img {
  max-width: 100%;
}

<div class="avatar">
  <img src="https://picsum.photos/120/120
" class="banner">
</div>
<div class="portfolio">
  <img src="https://picsum.photos/1200/400" class="banner">
</div>

图片没有响应 margin-bottom

Image not having a responsive margin-bottom

html

css

margin