我使用嵌入在 iframe 中的 HTML 文件来制作旋转横幅，因为我找不到任何其他方法，而且无论如何我都无法使嵌入的 iframe 响应：
这是 HTML 文件内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<style>
.responsive {
max-width: 100%;
height: auto;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
</style>
<head>
<title>Rotating Banners</title>
<script language="Javascript" type="text/javascript">
(removed image rotating script on request)
</script>
</head>
这是 iframe
<div style="padding-bottom:17%; position:relative; display:block; width: 100%">
<iframe src="rotate-banner.html" width="100%" height="100%" scrolling="no" frameborder="0" style="position:absolute; top:0; left: 0"></iframe>
</div>
我向 HTML 和 iframe div 添加了响应式代码，并期望 iframe 能够响应，但事实并非如此，无论浏览器的宽度如何，它都会显示全尺寸的横幅图像
编辑：请注意，如果直接浏览，HTML 本身可以正确响应。但是一旦 html 嵌入到 iframe 中，它就不再响应了。
这里有一个使 iframe 响应的技巧。你只需要我采取正确的方法来做到这一点。
https://getbootstrap.com/docs/4.0/utilities/embed/
如果需要，您还可以获取 bootstrap 的 CSS
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
CSS
.embed-responsive {
position: relative;
display: block;
width: 100%;
padding: 0;
overflow: hidden;
}
.embed-responsive::before {
display: block;
content: "";
}
.embed-responsive-16by9::before {
padding-top: 56.25%;
}
.embed-responsive-21by9::before {
padding-top: 42.857143%;
}
.embed-responsive-4by3::before {
padding-top: 75%;
}
.embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
您的代码与此示例。确保在使用之前添加了 CSS。
<div class="embed-responsive embed-responsive-16by9">
<iframe src="rotate-banner.html" scrolling="no" frameborder="0"></iframe>
</div>