时间戳

首页 > 解决方案 > 图片没有响应式边距底部

html - 图片没有响应式边距底部

问题描述

我正在编码的这个网站有一个带有投资组合的标题。我希望这些人的“化身”在投资组合的一半。基本上我希望头像图像总是下降到投资组合 div 的 50%。该页面是响应式的，因此它会相应地缩小。然而，头像图像会相应地缩小/调整大小；边距底部不保持相同的比例。我总是希望它低于 50%，进入下一个 div。这是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>

标签： htmlcssmargin

解决方案

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

调整窗口大小并享受

推荐阅读