图片叠加布局问题：按钮嵌入图片后拉伸不符Figma设计

问题根源 #

你的代码存在两个核心问题：

1. 图片被拉伸：.responsive-image设置了height: 100%，但未保持宽高比，导致图片被强制适配容器高度变形。
2. 定位基准错误：.wrapper未设置position: relative，使得内部绝对定位的渐变层和按钮都以<body>为基准，渐变层覆盖整个页面而非图片区域，按钮定位也偏离图片范围。

修正步骤及代码 #

修改后的CSS代码

.wrapper {
  width: auto;
  text-align: center;
  position: relative; /* 让内部绝对定位元素以容器为基准 */
  display: inline-block; /* 容器宽度自动适配图片 */
}

.wrapper::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(0, 9, 34, 0) 70%, #000922 99.52%);
  width: 100%;
  height: 100%;
  z-index: 10;
}

.background-image {
  display: none;
}

.responsive-image {
  max-width: 100%;
  height: auto; /* 保持图片原始宽高比，解决拉伸问题 */
  /* 若需图片填满容器且不拉伸，可替换为：
  width: 100%;
  height: 100%;
  object-fit: cover;
  */
}

body {
  background: linear-gradient(180deg, rgba(0, 9, 34, 0) 1%, #000922 100%);
}

.button-position {
  position: absolute;
  bottom: 20%;
  left: 15%;
  z-index: 200;
}

.cta-button {
  padding: 2rem 8rem;
  background: linear-gradient(180deg, #1FD660 0%, #127C38 100%);
  font-family: Barlow;
  color: white;
  font-size: 40px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.2em;
  text-align: center;
  text-decoration: none; /* 去掉链接默认下划线 */
}

修改后的HTML代码

<div class="wrapper">
  <img class="responsive-image" src="你的固定尺寸图片地址" />
  <div class="button-position">
      <a class="cta-button" href="<?php echo $button['new_template_button_link'] ?>">
        Button
      </a>
  </div>
</div>

关键改动说明 #

• .wrapper新增position: relative和display: inline-block：前者修正绝对定位元素的基准，后者让容器宽度贴合图片，避免渐变层超出图片范围。
• .responsive-image的height: auto：强制图片保持原始宽高比，彻底解决拉伸问题；若需要图片填满容器（如响应式场景），可使用object-fit: cover，通过裁剪边缘实现填满且不变形。
• .cta-button新增text-decoration: none：去掉链接默认下划线，更贴近设计图效果。

内容的提问来源于stack exchange，提问作者Jovan Jovanovic