HTML卡片内图片无法正常显示问题求助（附代码）

核心问题排查方向 #

• 文件路径验证：确认HTML文件与IMG文件夹的层级关系。若HTML在根目录，IMG/el_900.png路径正确；若HTML在子文件夹，需改为../IMG/el_900.png（向上回退一级目录）。同时检查文件名拼写（含大小写，部分系统区分）、图片扩展名是否与实际文件一致。
• 页面编码修正：页面当前设置UTF-16编码，绝大多数网页使用UTF-8，编码不匹配可能导致路径解析异常，建议改为<meta charset="UTF-8">。
• 图片本身检查：确认el_900.png未损坏，可直接在浏览器输入图片绝对路径（如http://localhost/IMG/el_900.png）测试能否打开。
• 样式适配：未给图片设置宽度限制，可能导致图片超出容器或因尺寸问题无法显示，建议添加max-width:100%; height:auto;样式确保自适应容器。

修正后的完整代码 #

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9.A</title>

    <style>
        * {
          box-sizing: border-box;
        }
        
        body {
          font-family: Arial;
          padding: 20px;
          background: #020202;
        }
        
        .header {
          padding: 30px;
          font-size: 40px;
          text-align: center;
          background: rgb(85, 85, 85);
        }
        
        .leftcolumn {   
          float: left;
          width: 75%;
        }
        
        .rightcolumn {
          float: left;
          width: 25%;
          padding-left: 20px;
        }
        
        .fakeimg {
          background-color: #aaa;
          width: 100%;
          padding: 20px;
        }
        
        .card {
           background-color: white;
           padding: 20px;
           margin-top: 20px;
        }
        
        /* 新增图片自适应样式 */
        .card img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto; /* 可选：让图片居中显示 */
        }
        
        .row:after {
          content: "";
          display: table;
          clear: both;
        }
      
        .footer {
          padding: 20px;
          text-align: center;
          background: #ddd;
          margin-top: 20px;
        }
        
        @media screen and (max-width: 800px) {
          .leftcolumn, .rightcolumn {   
            width: 100%;
            padding: 0;
          }
        }
        </style>

</head>
<body>

    <div class="header">
        <h2 style="color:white ">  9.A </h2>
      </div>
      
      <div class="row">
        <div class="leftcolumn">
          <div class="card">
            <h2>Az A osztályok, avagy az Elektrotechnika</h2>
            <p>Iskolánk 1962-es megalapítása óta folyamatosan képzünk villamosipari szakembereket. Kezdetben finommechanikai műszerész, később elektronikai műszerész osztályaink voltak, majd a technikusképzés bevezetése után ipari elektronikai technikusokat, jelenleg pedig elektronikai technikusokat képzünk. Az évek során esti munkarendben több erősáramú elektrotechnikus osztályunk is végzett, amely szakképesítés oktatására az iskolának jelenleg is van lehetősége.
                 </p>

          </div>
          <div class="card">
            <h2>Milyen szakképzési feladatokat tudnak ellátni az itt ballagott diákok?</h2>
            <p>Az elektronikai technikus feladatai közé tartozik az elektronikai áramkörök tervezése, építése, az áramkörök működőképességének méréssel történő vizsgálata, áramkörök javítása, áramkörökhöz kapcsolódó dokumentáció készítése éppúgy, mint irányítástechnikai rendszerek programozása, vagy automatikus gyártósorok, robotok üzemeltetése, karbantartása.
            </p>
          </div>

        <div class="card">
          <h2>Milyen munkafeladatokat tud elvégezni?</h2>
          <p>Az iparban egy gyártósor végén végezhet minőségellenőrzési, vagy javítási feladatokat, dolgozhat szervizesként, középvezetőként irányíthatja egy kisebb munkacsoport munkáját, de elhelyezkedhet mint ipari elektronikai technikus, gyengeáramú villamosipari technikus, jelzőberendezés technikus, koncert fénytechnikus, koncert színpadtechnikus vagy világítástechnikus.
          </p>
        </div>

        </div>
        <div class="rightcolumn">
          <div class="card">          
            <img src="IMG/el_900.png" alt="Avatar">
            <p> i need the picture here</p>
          </div>
      </div>
  

</body>
</html>

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