响应式amp-img覆盖figcaption导致图片拉伸问题如何修复

• 核心错误1：HTML 规范不支持自定义元素使用自闭合语法（/>），仅原生空元素（如<img>、<input>）可使用该写法。你写的<amp-img ... />会被浏览器识别为未闭合的标签，后续的<figcaption>会被自动解析为<amp-img>的子元素，而<amp-img>的responsive布局默认内部元素绝对定位填充，因此<figcaption>被图片覆盖，同时容器宽高比和实际图片比例不符导致图片拉伸。
• 辅助错误2：你设置的<amp-img>宽高比（600:400=3:2）和实际图片的宽高比（600:338≈16:9）不匹配，就算标签结构正确也会出现拉伸问题。

1. 把<amp-img>的自闭合写法改为显式闭合，添加</amp-img>结束标签，确保<figcaption>是<figure>的同级子元素，不会被包裹进图片容器内。
2. 将<amp-img>的height属性调整为338，和实际图片的宽高比匹配，避免拉伸。如果需要固定容器比例，也可以给<amp-img>内部的<img>添加object-fit: contain或object-fit: cover样式，无需额外修改属性。

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title> Hello World</title>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>

  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-custom>
    /* 可选：如果需要固定比例防止拉伸可加以下样式 */
    /* amp-img img {
      object-fit: cover;
    } */
  </style>
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<div class="wrapper">
<figure>
<amp-img layout='responsive' width='600' height='338' alt="image  alternate"  src="https://img.freepik.com/free-photo/youtube-logo-3d-rendering-close-up-youtube-channel-promotion-template_1379-4797.jpg" class=""></amp-img>
<figcaption>
<p>This is the description.</p>
</figcaption>
</figure>

</div>
</body>
</html>

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