仅使用 CSS 的响应式 iframe 高宽比例

Question

我试图保持 iframe 的比例始终相同，尽管有视口。只要下面的代码适用于块单元，iframe 就不会显示任何内容（我猜这是因为高度设置为 0）。如何保持 iframe 的比例为 4:3 (100% : 75%)？我不想使用任何 jquery，只是简单的 css。

iframe {
  width: 100%;
  height: 0;
  padding-bottom: 75%;
}

Answer 1

好的，我找到了解决办法。我将 iframe 包裹在 div 中并应用了以下代码：

div {
  width: 100%;
  height: 0;
  padding-bottom: 75%;
  position:relative;    
}

div iframe{
  width: 100%;
  height: 100%;
  position:absolute;
}