Css 使Bandcamp iframe响应-居中和溢出问题

我希望有一个只使用CSS的响应式Bandcamp iframe，如前所述（以及其他许多地方）。然而，有两个问题：

如果我将页面的宽度放大到大于700px，iframe容器将开始扩展到Bandcamp iframe无法扩展的范围。这会在iframe保持相同大小的同时向下推送下面的文本

一旦我达到这个极限，容器就不会居中

我认为合乎逻辑的解决方案是在查看页面的设备的宽度>700 px时设置一个设置，以保持iframe无响应，例如

if screen-width > 700px
   .responsive {
      width: 700px;
      ...
   }
else
   .responsive {
      width=100%;
      ...
   }

有没有办法做到这一点？或者一个更优雅的解决方案

这是小提琴：

解决方案1:

最大宽度

在不更改任何其他内容的情况下约束iframe宽度的最快方法是添加“最大宽度”属性：

。响应iframe{
最大宽度：700px；
}

这里有一个更新的演示最大宽度方法

---

解决方案2：媒体查询 实现这一点的另一种方法是使用媒体查询

如果屏幕宽度大于700，您可以添加类似这样的内容以将宽度限制为700px

@仅媒体屏幕和（最小宽度：700px）{
.响应iframe{
宽度：700px；
}
}

下面是一个演示媒体查询方法的示例

这里有一些资源可以帮助您了解更多关于媒体查询的信息，它们是响应式web开发的基础

---

编辑：居中 我错过了您最初的要求，让iframe居中。我已经用我推荐的居中方法更新了两个小提琴，即使用

display:flex

.responsive{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}

以下是使用flex样式的一些资源：








关于iframes的注记
虽然您可以使用iframe做一些聪明的事情，但是您应该意识到，除非您还控制iframe中的代码，否则您无法使用嵌入式iframe获得真正的响应体验。换句话说，如果没有从iframe内部加载的页面发送明确的消息（除非您构建了iframe显示的页面，并且还构建了来回发送消息的机制），或者没有一些严重的恶意攻击，父页面没有明显/清晰的方式来了解iframe中的任何内容。因此，无论出于何种目的，都不可能（据我所知）计算iframe内容的大小来布局父页面。以Bandcamp为例，父页面无法知道Bandcamp iframe在任何给定时间的高度，以便iframe内容底部没有浪费的空间。这只是iFrame和浏览器安全策略如何工作的不幸现实


希望这有帮助。祝你好运
 解决方案1:
最大宽度
在不更改任何其他内容的情况下约束iframe宽度的最快方法是添加“最大宽度”属性：

。响应iframe{
最大宽度：700px；
}

这里有一个更新的演示最大宽度方法


解决方案2：媒体查询
实现这一点的另一种方法是使用媒体查询

如果屏幕宽度大于700，您可以添加类似这样的内容以将宽度限制为700px

@仅媒体屏幕和（最小宽度：700px）{
.响应iframe{
宽度：700px；
}
}

下面是一个演示媒体查询方法的示例

这里有一些资源可以帮助您了解更多关于媒体查询的信息，它们是响应式web开发的基础







编辑：居中
我错过了您最初的要求，让iframe居中。我已经用我推荐的居中方法更新了两个小提琴，即使用
display:flex

.responsive{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}

以下是使用flex样式的一些资源：








关于iframes的注记
虽然您可以使用iframe做一些聪明的事情，但是您应该意识到，除非您还控制iframe中的代码，否则您无法使用嵌入式iframe获得真正的响应体验。换句话说，如果没有从iframe内部加载的页面发送明确的消息（除非您构建了iframe显示的页面，并且还构建了来回发送消息的机制），或者没有一些严重的恶意攻击，父页面没有明显/清晰的方式来了解iframe中的任何内容。因此，无论出于何种目的，都不可能（据我所知）计算iframe内容的大小来布局父页面。以Bandcamp为例，父页面无法知道Bandcamp iframe在任何给定时间的高度，以便iframe内容底部没有浪费的空间。这只是iFrame和浏览器安全策略如何工作的不幸现实


希望这有帮助。祝你好运
 自从我发布我的答案后，我做了一些编辑。希望能让我的答案更清楚，并提供一些（希望）有用的链接。更新我的答案，提供信息，解决我错过的中心要求。还添加了关于iframes的注释。哦，还有一件事。。。在您的示例中，您不需要使用
#main content
规则，因为页面上没有任何具有该id的元素，所以它什么也不做。这是一个令人惊讶的完整答案，非常感谢！我希望这得到它应得的选票。自从我发布了我的答案后，我做了一些编辑。希望让我的答案更清楚，并提供一些（希望）