当我添加一段二十个句子时，图像尺寸会增加答案

【问题标题】：When I add a paragraph of twenty sentences the image size increases当我添加一段二十个句子时，图像尺寸会增加
【发布时间】：2023-01-12 22:26:05
【问题描述】：

我正在尝试学习 html 和 css 我在下面创建的页面有问题，每当我在段落中添加句子时图像大小都会增加。我看了视频，搜索了谷歌，但没有找到解决办法。有人可以帮我处理代码，并解释哪里出了问题吗？

body {
  background: #222831;
  ;
  padding: auto;
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

.info img {
  display: block;
  margin: auto;
  border-radius: 50%;
  max-width: 50%;
}

.info h3 {
  text-align: center;
}

.info h4 {
  text-align: center;
}

.navigaton {
  display: flex;
}

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

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

.navabt {
  justify-content: center;
  align-items: center;
  margin: 0%;
}

<div class="container">

  <div class="info">
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/ac/Default_pfp.jpg" alt="error">
    <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>
  </div>
</div>

我希望段落与中心对齐，每当我添加段落句子时，图像大小不应增加

【问题讨论】：

标签： html css

【解决方案1】：

我发现了你的问题，在 CSS 中，由于额外的冒号，body 元素的大部分 CSS 规则都被忽略了，因此宽度没有被设置为允许页面继续增长的大小，然后由于 img将页面大小设置为它也在增长的一半。这现在应该可以工作，希望这会有所帮助。

body {
background: #222831;
  padding: auto;
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

.info img {
  display: block;
  margin: auto;
  border-radius: 50%;
  max-width: 50%;
}

.info h3 {
  text-align: center;
}

.info h4 {
  text-align: center;
}

.navigaton {
  display: flex;
}

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

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

.navabt {
  justify-content: center;
  align-items: center;
  margin: 0%;
}

【讨论】：