如何用CSS将图片固定在屏幕右侧并消除垂直滚动？

我想通过CSS将图片对齐到屏幕右侧，让它覆盖空白区域，同时消除页面的垂直滚动条。之前试过float:right和flex布局，都没达到预期效果。

HTML代码 #

<!DOCTYPE html>
<html lang="pt-PT">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A'TECH - Home</title>

    <link rel="stylesheet" href="../css/common-css.css">
    <link rel="stylesheet" href="../css/home.css">
</head>
<body>
    <div class="navbar">
        <div class="brand-logo">🏝️ A'TECH</div>
        <div class="navbar-links">
            <a href="../html/home.html">Home</a> <span>-</span>
            <a href="../html/work.html">CEO</a> <span>-</span>
            <a href="../html/work.html">Shop</a> <span>-</span>
            <a href="../html/about.html">About</a> <span>-</span>
            <a href="../html/work.html">A.I Chatbot</a> <span>-</span>
            <a href="../html/work.html">Social Media Manager</a>
        </div>
        <div class="auth-links">
            <a href="../html/work.html">CEO Free Tool (Register & Login)</a>
        </div>
    </div>

    <div class="sections">
        <div class="carousel-section">
            <div class="carousel">
                <h1 class="carousel-header">A.I CHATBOT</h1>
                <p class="carousel-description">
                    Chat Bot (inteligência artificial - IA). Um chatbot é um programa de computador que simula conversas humanas por meio de mensagens de texto ou voz. Já a IA é um campo da ciência da computação que se concentra em criar máquinas capazes de realizar tarefas que normalmente exigiriam inteligência humana.
                </p>
            </div>
        </div>
        <div class="carousel-image">
            <img class="ocean-view-image" src="/public/images/ocean-view.jpg" alt="Ocean View">
        </div>
    </div>

    <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../js/home.js"></script>
</body>
</html>

CSS代码 #

// Include any default variable overrides here (though functions won't be available)

@import "../../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here

.sections {
  width:50%;

  color: white;

  display: flex;

  justify-content: start;
}

.carousel-section {
    margin-top: 30%;
    margin-left: 30%;

  position: ab;
}

.carousel-section > h1 {
    text-decoration: underline;
}

.auth-links {
  margin-right: 1%;
}

.brand-logo {
  margin-left: 1%;
}

.ocean-view-image {
  width: 40vw;
  height: 110vh;
}

我还尝试过使用float:right属性。

以下是调整后的CSS代码，可实现图片右对齐覆盖空白、消除垂直滚动条的效果：

// 重置默认边距内边距，避免页面溢出
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

// 锁定页面视口，消除滚动条
html, body {
  height: 100vh;
  overflow: hidden;
}

// 导航栏样式保持，可根据实际需求调整背景色等
.navbar {
  padding: 1rem;
  background-color: #222;
}

.sections {
  width: 100%;
  height: calc(100vh - 60px); // 减去导航栏高度，避免内容被遮挡
  color: white;
  display: flex;
  position: relative;
}

.carousel-section {
  flex: 1;
  padding: 2rem;
  margin: auto 0 auto 30%; // 垂直居中，保持左侧间距
}

.carousel-image {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%; // 可根据需求调整图片占比宽度
}

.ocean-view-image {
  width: 100%;
  height: 100%;
  object-fit: cover; // 保持图片比例，完整覆盖容器
}

关键调整说明： #

1. 给html和body设置height:100vh+overflow:hidden，直接锁定页面视口，消除滚动条
2. 将.sections改为全屏宽度，设置相对定位作为图片容器的定位参考
3. 把.carousel-image改为绝对定位，固定在屏幕右侧，高度占满剩余空间
4. 图片使用object-fit:cover保证比例的同时铺满容器，避免拉伸变形
5. 调整.carousel-section的margin实现垂直居中，移除原有的固定顶部间距，适配不同屏幕

内容的提问来源于stack exchange，提问作者Leandro Jesus