如何让图片宽度适配移动端屏幕宽度？

要解决移动端图片导致横向滚动的问题，只需调整CSS并添加必要的viewport设置，具体修改如下：

1. 补充HTML的viewport元标签 #

在HTML的<head>里添加以下标签，确保移动端浏览器能正确适配屏幕宽度：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 修改CSS样式 #

替换原有header和图片的固定宽高设置，改用自适应的相对单位：

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  /* 防止页面出现横向滚动条 */
  overflow-x: hidden;
}

header{
  margin: 0 auto;
  display: flex;
  justify-content: center;
  /* 让header最大宽度不超过屏幕宽度 */
  max-width: 100%;
  /* 去掉固定高度，让内容自动撑开 */
  height: auto;
}

header img{
  /* 图片最大宽度不超过父容器（即屏幕宽度） */
  max-width: 100%;
  /* 高度自动按比例缩放，避免图片变形 */
  height: auto;
}

修改后的完整HTML示例 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Caillou Site</title>
  <link rel="stylesheet" href="your-stylesheet.css">
</head>
<body>
  <header>
    <h1 class="hidden">Welcome to caillou.tk!</h1>
    <a href="/"><img src="img/k.png" alt="Caillou Logo"></a>
  </header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="https://www.youtube.com/channel/UC4yQCVlLhTmOqX5kUkAGr0g">Watch</a></li>
      <li><a href="characters">Characters</a></li>
      <li><a href="about">About Caillou</a></li>
      <li><a href="credits">Credits</a></li>
    </ul>
  </nav>
</body>
</html>

关键要点说明 #

• viewport标签：强制移动端浏览器以设备自身宽度作为页面宽度，避免缩放导致的布局错乱。
• max-width: 100%：确保header和图片不会超出屏幕宽度，自动适配不同尺寸的移动设备。
• height: auto：保持图片的原始宽高比，防止拉伸变形。
• overflow-x: hidden：兜底防止页面出现横向滚动条。

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