html - iframe 高度未填充到 50%

Question

我目前正在处理我的考试元素并正在构建一个 wordpress 主题(我已将其转换为 CodePen 的 HTML)。

它正在运行，但遗憾的是，我用于播客的所有 iframe 都卡在了设定的高度，而不是像我想要的那样填充。我尝试了很多来解决这个问题，但无法让它发挥作用。

代码笔可在 https://codepen.io/Puffss/pen/weWPmW

主要是关于

iframe {
  background: url(img/placeholdersoundcloud.jpg);
  background-size: cover;
  width: 18%;
  height: 50%;
  float: left;
  margin: 0% 1% 0.6% 1%;
}

<iframe width="640" height="400" scrolling="no" frameborder="no" src="./SpaarnestadPhoto Exposities_files/saved_resource.html"></iframe>

请注意:这是作为单个网页生成的 wordpress 代码，因此在 iframe 中出现了奇怪的代码和缺失的链接。

Answer 1

将此添加到您的 CSS 中

iframe{
  height:50% !important;
  width: 600px;
}

它将覆盖所有标签的行内高度(在本例中为 50%)<iframe>

我还建议您检查为什么 WordPress 会自动设置高度和宽度，并且可能尝试从源代码中删除它们，因为通常使用 important 这不是最佳实践 https://codepen.io/NickHG/pen/BZzJKZ