求助：实现类似olaolu.dev的响应式作品集首页自适应效果

我正在开发个人作品集网站，参考了某网站的页面样式，实现响应式效果时遇到问题。该网站窗口尺寸变化时所有元素自动适配调整，效果类似CSS的object-fit: contain但略有区别。附上已完成的HTML和CSS代码，求技术帮助。

HTML代码 #

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="/b/cs.css">
</head>
<body>
    <section class="section-top">
        <img class="main1-img" src="/b/images/pngtree-portfolio-memphis-playful-abstract-pink-image_593412.jpg">
        <h2>faxraddin</h2>
        <h1>Frontend<br>Developer.</h1>
        <h3 class="profession-info">I like to craft solid and scalable frontend products with great user experiences.</h3>
        <img class="my-img" src="/b/images/Screenshot 2022-11-04 at 19.35.20.png">
        <div class="some-info">
            <span>Highly skilled at progressive enhancement, design systems & UI Engineering.</span>
            <span>Over a decade of experience building products for clients across several countries.</span>
        </div>
        <div class="btn-container">
            <ul>
                <li><a></a></li>
            </ul>
        </div>
    </section>
    <script src="/b/js.js"></script>
</body>
</html>

CSS代码 #

body {
    margin: 0;
    padding: 0;
}

.section-top{
    contain: size;
    position: relative;
}

.main1-img{
    width: 100%;
    height: 666px;
    position: relative;
}

.section-top h2{
    position: absolute;
    top: 0;
    padding: 20px;
    padding-left: 100px;
    font-size: 2.5rem;
    color: rgb(32, 166, 166);
}

.section-top h1{
    position: absolute;
    top: 20%;
    left: 10%;
    font-size: 4.5rem;
    color: rgb(32, 166, 166);
}

.profession-info{
    position: absolute;
    top:48%;
    left: 10%;
    color: rgb(32, 166, 166);
    width: 25rem;
}

.my-img{
    width: 333px;
    position: absolute;
    right: 22%;
    top:23%;
}

.some-info{
    position: absolute;
    top: 65%;
    display: flex;
    justify-content: space-between;
    width: 30rem;
    left: 10%;
}

.some-info span{
    width: 50%;
    margin-right: 10%;
    color: rgb(8, 105, 105);
}

@media  screen and (max-width:700px) {
}

当前代码核心问题是使用固定尺寸（如333px、2.5rem）和绝对定位的固定百分比，导致窗口缩小时元素布局错乱。参考目标网站的适配逻辑，可通过以下方式优化：

1. 基础布局适配 #

• 给.section-top设置min-height: 100vh，让容器占满视口高度，适配不同屏幕；移除contain: size，改用overflow: hidden防止内容溢出。
• 背景图.main1-img改为绝对定位并设置height: 100%，配合object-fit: cover保持比例同时覆盖容器，再用z-index: -1将其置于内容底层。

2. 字体与尺寸弹性化 #

• 使用clamp()函数设置字体和元素宽度，实现随屏幕宽度自动缩放，例如：
  • 标题字体：font-size: clamp(2.5rem, 6vw, 4.5rem)
  • 文本宽度：width: clamp(20rem, 40vw, 25rem)
• 用clamp()替代固定的padding/margin值，让边距随屏幕自适应。

3. 绝对定位元素调整 #

• 调整绝对定位的top/left/right值为百分比结合clamp()，避免固定值导致的布局偏移。
• 移动端将.my-img改为静态定位居中显示，.some-info改为垂直布局，避免元素重叠。

优化后CSS代码示例 #

body {
    margin: 0;
    padding: 0;
}

.section-top{
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

.main1-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: -1;
}

.section-top h2{
    position: absolute;
    top: 2%;
    left: clamp(20px, 8vw, 100px);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: rgb(32, 166, 166);
    margin: 0;
}

.section-top h1{
    position: absolute;
    top: 20%;
    left: clamp(20px, 8vw, 10%);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    color: rgb(32, 166, 166);
    margin: 0;
    line-height: 1.2;
}

.profession-info{
    position: absolute;
    top:48%;
    left: clamp(20px, 8vw, 10%);
    color: rgb(32, 166, 166);
    width: clamp(20rem, 40vw, 25rem);
    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.5;
}

.my-img{
    width: clamp(200px, 30vw, 333px);
    position: absolute;
    right: clamp(5%, 15vw, 22%);
    top:23%;
}

.some-info{
    position: absolute;
    top: 65%;
    display: flex;
    justify-content: space-between;
    width: clamp(20rem, 50vw, 30rem);
    left: clamp(20px, 8vw, 10%);
    gap: 2rem;
}

.some-info span{
    flex: 1;
    color: rgb(8, 105, 105);
    font-size: clamp(0.9rem, 1.5vw, 1rem);
    line-height: 1.6;
}

@media screen and (max-width:700px) {
    .section-top h1{
        top: 15%;
    }
    .profession-info{
        top: 40%;
    }
    .my-img{
        position: static;
        display: block;
        margin: 5rem auto 2rem;
        width: 60%;
    }
    .some-info{
        position: static;
        flex-direction: column;
        width: 80%;
        margin: 0 auto;
        gap: 1.5rem;
    }
}

内容的提问来源于stack exchange，提问作者Count of Monte Cristo