如何让图片上的文本在所有设备中不溢出图片范围？

问题描述 #

我正在制作个人作品集，遇到了文本在移动设备上超出图片范围的问题，希望能让文本在所有设备中都保持在图片内。以下是出现问题的代码片段：

.hero-text { text-align: center; position: absolute; top: 70%; left: 50%; transform: translate(-50%, -50%); color: white; }
.parallax { /* The image used */ background-image: url("https://github.com/AakashSYadav/AakashSYadav.github.io/blob/master/aakash.jpg?raw=true"); /* Set a specific height */ min-height: 500px; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }

<div class="parallax">
  <div class="hero-text">
    <h1 style="font-size:50px">I am Aakash Yadav</h1>
    <h2>I am a Bachelor of Technology (B.Tech), Sophomore Year, Mechanical Engineering undergraduate student at Indian Institute of Technology, Tirupati</h2>
  </div>
</div>

解决方案 #

嘿，这个问题很常见！核心原因是你的.hero-text用了绝对定位但没做宽度限制，加上大字体和长文本，小屏幕自然就撑出去了。这里有几个简单的修复方法，你可以组合使用：

• 给文本容器加宽度限制和内边距
  这是最直接的办法，确保文本不会超出屏幕（也就是背景图片）的范围：

  .hero-text {
    text-align: center;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    /* 新增这几行 */
    max-width: 90%; /* 最多占屏幕90%的宽度，留足左右空间 */
    padding: 0 1rem; /* 左右各加1rem内边距，避免贴边 */
    box-sizing: border-box; /* 让内边距不会额外增加容器宽度 */
  }
  

• 用响应式字体大小适配不同屏幕
  大屏幕用大字体，小屏幕自动缩小，避免单行文本过长：

  .hero-text h1 {
    font-size: clamp(2rem, 5vw, 50px); /* 最小2rem，最大50px，根据屏幕宽度自动调整 */
  }
  .hero-text h2 {
    font-size: clamp(1rem, 2.5vw, 1.5rem); /* 副标题同理，比例小一点 */
    line-height: 1.5; /* 增加行高，小屏幕读起来更舒服 */
  }
  

• 让背景容器高度更适配小屏幕
  原来的min-height:500px在极小屏幕上可能还是不够，改成视口高度单位更灵活：

  .parallax {
    background-image: url("https://github.com/AakashSYadav/AakashSYadav.github.io/blob/master/aakash.jpg?raw=true");
    min-height: 80vh; /* 至少占视口高度的80%，不管屏幕多大都能保证足够空间 */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative; /* 别忘了加这个！确保绝对定位的子元素是相对于这个容器定位的 */
  }
  

完整修改后的代码

把上面的改动整合起来，就是这样：

.hero-text {
  text-align: center;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  max-width: 90%;
  padding: 0 1rem;
  box-sizing: border-box;
}

.hero-text h1 {
  font-size: clamp(2rem, 5vw, 50px);
  margin: 0 0 1rem 0;
}

.hero-text h2 {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  margin: 0;
  line-height: 1.5;
}

.parallax {
  background-image: url("https://github.com/AakashSYadav/AakashSYadav.github.io/blob/master/aakash.jpg?raw=true");
  min-height: 80vh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

<div class="parallax">
  <div class="hero-text">
    <h1>I am Aakash Yadav</h1>
    <h2>I am a Bachelor of Technology (B.Tech), Sophomore Year, Mechanical Engineering undergraduate student at Indian Institute of Technology, Tirupati</h2>
  </div>
</div>

这样修改后，文本在手机、平板和桌面设备上都会乖乖待在背景图片里啦！

内容的提问来源于stack exchange，提问作者Anshul Yadav