我正在尝试将基本html(本地文件(插入到父html中。从我之前的问题中，我得出结论，jquery加载可能永远不会在prod中工作，所以我尝试按照Makesh Keshu的建议使用iframe。它有点像我想要的，但现在我遇到了一些样式问题？由于我尝试嵌入的本地文件本质上只是文本，我希望它看起来像父 html 包含文本(又名响应式大小调整和所有( - 嵌入 html 而不仅仅是直接编写它的动机主要是因为网站所有者想要尝试使文本条目无法"窃取"只是检查和复制文本。
我的 css 现在使用一个 iframe 包装器类，它执行其他人建议的通常操作：
.text-wrapper {
position: relative;
padding-bottom: 100%;
padding-top: 100%;
height: 0;
overflow: hidden;
}
.text-wrapper iframe {
position: absolute;
border: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}
但是，我怀疑由于填充属性的纵横比，当我的屏幕处于分屏视图或在移动设备上时，它看起来很棒，但是当我将屏幕大小调整为全屏时，所有文本下方都有很多空白区域，以使容器保持在大约半屏幕视图纵横比。(如果这个假设是错误的，请纠正我 - 我仍然是前端的初学者。
基本上，我想尝试使 iframe 容器的纵横比与选项卡/窗口/屏幕的纵横比相同——随着窗口大小的调整等而变化。
我浏览了这个问题，因为它看起来很相似，但我既不确定我是否很好地理解了答案背后的想法，也不确定它是否真的回答了我的问题。我认为这个问题是要求根据内容大小调整 iframe 容器的大小，而无需使用固定的纵横比，这将实现同样的事情，但我正在尝试看看我是否可以根据"屏幕"(窗口？(比率使纵横比响应。
这篇文章最终非常适合我的特定目的。我不确定我是否100%理解它背后的理论，但它使用了一个伪元素。它似乎已经解决了我在全屏 iframe 容器中有多余的空格的问题，但我不确定它是否解决了一般问题(对于想要尝试该方法的人(。
我最终使用的 css 代码(对于容器，iframe 的 css 保持不变(：
.aspect-ratio-box {
background: white;
}
.text-wrapper::before {
content: "";
width: 1px;
margin-left: -1px;
float: left;
height: 0;
padding-top: 52.46%;
}
.text-wrapper::after {
content: "";
display: table;
clear: both;
}