技术需求：调整首图定位匹配参考站+图片下半区置于父区块下

需求拆解 #

• 让首页首图匹配目标网站的定位布局
• 使图片下半部分延伸至父区块外部

无需修改现有HTML结构 #

你的HTML结构可以保持不变：

<div class="about-section section section-padding-bottom" style="background: linear-gradient(90deg, rgba(76,111,113,1) 0%, rgba(156,232,197,1) 100%);">
  <div class="container">
    <div class="container" style="background: linear-gradient(90deg, rgba(76,111,113,1) 0%, rgba(156,232,197,1) 100%);">
      <ul class="breadcrumb" style="float: right;">
        <li>
          <a href="en/home.html" style="font-family: 'Secular One'; color: #fff; font-size: 20px;"><img src="assets/images/nove/uk-removebg-preview.png" alt="">&nbsp;&nbsp;English</a>
        </li>
      </ul>
    </div>

    <div class="row align-items-center">
      <div class="col-lg-4 col-md-12 order-lg-1 order-1">
        <div class="about-content mt-sm-50 mt-xs-50">
          <a href="index.html">
            <h1 style="font-family: 'Blueberry Days', sans-serif; color: #fff; letter-spacing: 2px;">
              cleanland.<span style="color: #fffbcc;">ch</span></h1>
          </a>

          <h2 class="title" style="font-family: 'Secular One'; color: #fff;">Professionelle und&nbsp;zuverlässige Büroreinigung in Zürich</h2>

          <a href="contact.html" style="background-color: #fff; border-color: #fff; color: #4c6f71; font-size: 30px; font-family: 'Secular One';" class="btn btn-primary btn-hover-secondary">OFFERTE ANFORDERN</a><br><br>
          <a href="tel:+41797555777" class="btn btn-primary btn-hover-secondary" style="background-color: #fff; border-color: #fff; color: #4c6f71; font-size: 30px; font-family: 'Secular One';">
                        +41 79 7 555 777</a><br><br>
          <a href="mailto:hello@cleanland.ch" class="btn btn-primary btn-hover-secondary" style="background-color: #fff; border-color: #fff; color: #4c6f71; font-size: 30px; font-family: 'Secular One';">
                        hello@cleanland.ch</a>
        </div>
      </div>

      <div class="col-lg-8 col-md-12 order-lg-1 order-2">
        <div class="about-image">
          <div class="about-image-one">
            <img src="assets/images/nove/naslovna-06.png" alt="about01">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS修改方案 #

添加以下CSS代码到你的样式文件中：

/* 父区块基础设置：开启相对定位，移除底部内边距 */
.about-section {
  position: relative;
  padding-bottom: 0 !important;
  overflow: visible;
}

/* 图片容器定位：让图片右侧对齐，下半部分超出父区块 */
.about-image-one {
  position: absolute;
  bottom: -150px; /* 可根据实际图片高度调整此值，控制超出部分的长度 */
  right: 0;
  width: 60%; /* 匹配目标网站的图片宽度占比 */
}

/* 图片自适应 */
.about-image-one img {
  width: 100%;
  height: auto;
  display: block;
}

/* 响应式适配：移动端恢复正常布局 */
@media (max-width: 991px) {
  .about-image-one {
    position: static;
    width: 100%;
    margin-top: 30px;
  }
}

效果说明 #

• 通过给.about-section设置position: relative，让图片容器可以基于父区块定位
• bottom: -150px使图片下半部分延伸到父区块下方，数值可根据你的图片实际高度微调
• 右侧对齐的设置和目标网站布局一致
• 移动端样式保证小屏幕下图片不会错位，恢复正常文档流布局

内容的提问来源于stack exchange，提问作者Filip Curic