如何实现文本与图片保持等比例缩放？附现有CSS及HTML代码

我明白你想要的效果是：当图片随着屏幕尺寸缩小的时候，图片上的文字也能同步按比例缩小，并且保持和图片的相对位置不变——而不是把文字隐藏掉。咱们来调整你的代码实现这个需求：

问题根源分析 #

当前你的文字是基于.header容器做绝对定位的，但.header的尺寸并没有和图片的尺寸绑定，而且文字的位置和大小用了固定像素值，所以图片缩放时，文字没法跟着同步变化。咱们需要把文字的定位基准改成图片所在的容器，并且用相对单位来控制文字的大小和位置。

修改后的完整代码 #

HTML 代码

<div class="header">
  <!-- 新增一个相对定位的容器，让文字以它为基准定位 -->
  <div class="header-content">
    <img class="header-image" src="img/jeans.jpg" alt="Jeans">
    <div class="text-overlay">
      <h1 class="new-arrivals">New arrivals</h1>
      <h3 class="designs">Our new season collection is here</h3>
      <a href=".products" class="shop-now">SHOP NOW</a>
    </div>
  </div>
</div>

CSS 代码

/* 基础样式重置和全局设置 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.header {
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  padding: 30px; /* 用padding代替图片的margin，控制整体间距 */
}

/* 这个容器是关键：相对定位，让内部绝对定位的元素以它为基准 */
.header-content {
  position: relative;
  max-width: 1200px; /* 限制最大宽度，避免图片太宽 */
  margin: 0 auto;
}

.header-image {
  width: 100%; /* 占满容器宽度，自动缩放 */
  height: auto; /* 保持图片比例 */
  display: block;
}

/* 文字容器，绝对定位覆盖在图片上 */
.text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 5vw; /* 用vw做内边距，随屏幕/图片缩放 */
}

.new-arrivals {
  font-size: 4vw; /* 用vw单位，随屏幕宽度同步缩放 */
  color: black;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 2vw;
}

.designs {
  font-size: 2vw; /* 同样用vw单位 */
  color: black;
  font-weight: 400;
  margin-bottom: 4vw;
}

.shop-now {
  display: inline-block;
  padding: 1vw 2vw; /* 相对单位的内边距 */
  background-color: black;
  color: white;
  text-decoration: none;
  text-align: center;
  font-size: 1.5vw; /* 按钮文字也用vw */
  white-space: nowrap;
  border: none;
}

.shop-now:hover {
  background-color: #ccc;
  color: black;
  border: 1px solid black;
}

/* 可选：针对极小屏幕微调，确保文字不会太小 */
@media screen and (max-width: 480px) {
  .new-arrivals {
    font-size: 24px;
  }
  .designs {
    font-size: 14px;
  }
  .shop-now {
    font-size: 12px;
    padding: 8px 16px;
  }
}

关键修改点说明 #

1. 新增.header-content容器：设置position: relative，让内部的文字绝对定位时，以这个容器（也就是图片的容器）为基准，确保文字始终覆盖在图片上方。
2. 图片自适应：把.header-image的width设为100%，让它自动占满容器宽度，同时height: auto保持图片比例。
3. 相对单位控制文字：所有文字的font-size、padding、margin都用vw（视窗宽度百分比）作为单位，这样当屏幕宽度变化（图片随之缩放）时，文字的大小和间距也会同步按比例变化。
4. 文字容器全屏覆盖：.text-overlay设置width: 100%; height: 100%，确保文字区域和图片大小完全一致，定位更精准。

这样调整后，不管屏幕怎么缩小，图片和上面的文字都会保持原有的比例和相对位置，完全符合你的需求~

内容的提问来源于stack exchange，提问作者Sophia Taylor