添加文本时页面宽度与图片尺寸异常增大的解决求助

问题原因 #

1. 图片尺寸异常变化：你给body设置了display: flex和align-items: center，这会让.container的宽度完全由内部内容撑开。当段落内容增多时，.container宽度被拉宽，而.info img的max-width: 50%是相对于.info的宽度（.info宽度继承自.container），所以图片会跟着变宽。
2. 段落未居中：.navabt没设置文本居中属性，段落默认左对齐。

修正后的代码 #

CSS

body {
  background: #222831;
  margin: 0;
  min-height: 100vh; /* 让body占满视口高度 */
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 内容从顶部开始，避免容器被垂直拉伸 */
  padding: 20px; /* 加内边距避免内容贴边 */
}

.container {
  max-width: 800px; /* 限制容器最大宽度，防止无限拉伸 */
  width: 100%; /* 小屏幕时占满可用宽度 */
}

.info {
  justify-content: center;
  margin-top: 80px;
  display: flex;
  flex-direction: column;
}

.info img {
  display: block;
  margin: auto;
  border-radius: 50%;
  max-width: 200px; /* 给图片固定最大宽度，也可保留50%但依赖container的宽度限制 */
  width: 100%; /* 确保图片在小屏幕自适应 */
}

.info h3, .info h4 {
  text-align: center;
  color: #fff; /* 加白色文字，适配深色背景 */
}

.navigaton {
  display: flex;
  gap: 20px; /* 给导航链接加间距，布局更合理 */
  justify-content: center; /* 导航居中 */
  margin: 30px 0;
}

.navigaton a {
  text-decoration: none;
  color: white;
  text-transform: uppercase;
  opacity: 25%;
}

.navigaton a:hover {
  text-shadow: 0 0 15px cyan;
  opacity: 100%;
  color: cyan;
}

.navabt {
  text-align: center; /* 实现段落居中 */
  color: #fff;
  line-height: 1.6; /* 优化行高，提升可读性 */
}

HTML

<div class="container">
  <div class="info">
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/ac/Default_pfp.jpg" alt="profile">
    <h3>Anirban Roy</h3>
    <h4>Btech in cse</h4>
  </div>

  <div class="navigaton">
    <a href="">Summary</a>
    <a href="">Key Skills</a>
    <a href="">Education</a>
  </div>

  <div class="navabt">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil perspiciatis eveniet quod enim. Sed nam tenetur eveniet, nostrum iusto libero.</p>
    <p>新增的段落内容，现在图片不会跟着变大了，而且文本是居中的。</p>
  </div>
</div>

关键调整说明 #

• 给.container添加max-width，彻底限制容器宽度，无论段落内容增加多少，容器宽度不会超过设定值，图片尺寸也就被固定住。
• 把body的align-items改为flex-start，避免容器被垂直拉伸，同时用min-height:100vh保证背景铺满屏幕。
• .navabt加text-align:center实现段落居中，同时优化文字颜色和行高提升可读性。
• 导航部分用gap和justify-content:center让链接分布更合理，替代原有的margin-left:auto布局。

内容的提问来源于stack exchange，提问作者Anirban Roy