如何在HTML中嵌入HTML并实现自动调整大小？

我尝试用iframe标签嵌入HTML内容，但它始终保持默认尺寸——这是默认宽高设置导致的。我试过调整object-fit属性，iframe尺寸还是没变化。

我知道可以手动设置宽高属性，但我希望iframe能像其他HTML元素一样自动调整大小，让示例2的效果和示例1完全一致（见截图），实现「嵌入HTML后完全适配，表现得如同原生HTML元素」的效果。

注：我并非必须使用iframe，只是看到建议用iframe才进行了尝试。

参考文件 #

1. index.html #

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
table, th, td {
 border: 1px solid black;
 text-align: left;
}
</style>
<title>iframe experiment</title>
</head>
<body>
<h3>Example 1: Duplicated note</h3>
<p>In the following example I duplicate my note 3 times. Notice how the HTML sizes as expected.</p>
<p>Consider the following note:</p>
<p>Note: This is a note.</p>
<p>Consider the same note in a list:</p>
<ol>
 <li><p>Note: This is a note.</p></li>
</ol>
<p>Consider the same note in a table:</p>
<table>
 <tr>
     <th>Notes</th>
 </tr>
 <tr>
     <td><p>Note: This is a note.</p></td>
 </tr>
</table>

<h3>Example 2: Inline frame note</h3>
<p>In the following example I embed my note 3 times with the <em>Inline Frame element (iframe)</em>. Notice how the inline frame looks wonky because of the default height and width.</p>
<p>Consider the following note:</p>
<iframe src="note.html"></iframe>
<p>Consider the same note in a list:</p>
<ol>
 <li><iframe src="note.html"></iframe></li>
</ol>
<p>Consider the same note in a table:</p>
<table>
 <tr>
     <th>Notes</th>
 </tr>
 <tr>
     <td><iframe src="note.html" style="object-fit:none;"></iframe></td>
 </tr>
</table>
</body>
</html>

2. note.html #

<p>Note: This is a note.</p>

3. 效果截图 #

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