时间戳

首页 > 解决方案 > 仅使用 CSS 的响应式 iframe 高宽比例

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

问题描述

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

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

标签： iframewidthscale

解决方案

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

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

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

推荐阅读