Question

我正在编码的此网站的标头包含一个投资组合。我希望“化身”的人进入投资组合的一半。基本上，我希望头像图像始终保持在组合div的50％以下。页面是响应式的，因此相应地缩小。但是，头像图像会相应缩小/调整大小。底边距不保持相同比例。我一直希望它低于下一个div的50％。这是GIF。它的开始就是我想要的，看着我调整大小。谢谢。

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的链接。 https://codepen.io/atulraj89/pen/qQQBMm

调整窗口大小并享受

Answer 2

如果您使用相对单位（％）作为化身的宽度以及顶部的填充，它将相应地增大/缩小。

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>

图像的底边没有响应

2 个答案: