参考资料

  1. HTML 内联式
  2. 如何检测开发者工具是否被禁用？
  3. 如何添加按钮的过渡动画效果？
  4. html内嵌框架标签详细说明以及案例
  5. HTML 强调
  6. HTML id 属性在 JavaScript 中的使用
  7. HTML 字体, 字体颜色 ，字体大小
  8. HTML 颜色

HTML高度与宽度设置 Iframe

HTML Iframe 高度与宽度设置

基本介绍

<iframe> 标签用于在当前HTML文档中嵌入另一个文档，高度和宽度是控制iframe显示尺寸的重要属性。

主要属性

基本属性

  • height: 设置iframe的高度（像素或百分比）

  • width: 设置iframe的宽度（像素或百分比）

语法

<iframe src="URL" height="像素值|百分比" width="像素值|百分比"></iframe>

使用方法

固定像素值

<iframe src="example.html" width="500" height="300"></iframe>

百分比值

<iframe src="example.html" width="100%" height="50%"></iframe>

CSS扩展样式

可以通过CSS更灵活地控制iframe尺寸：

<style>
  .responsive-iframe {
    width: 100%;
    height: 400px;
    max-width: 800px;
    min-height: 200px;
    border: none;
  }
</style>

<iframe src="example.html" class="responsive-iframe"></iframe>

响应式设计技巧

保持宽高比

.iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 宽高比 */
  height: 0;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

功能说明

  • 固定尺寸：适合需要精确控制显示区域的情况

  • 百分比尺寸：适合响应式布局，随父容器变化

  • CSS控制：提供更灵活的样式选项和响应式解决方案

完整示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .iframe-wrapper {
      width: 80%;
      margin: 0 auto;
    }
    .responsive-iframe {
      width: 100%;
      height: 0;
      padding-bottom: 75%; /* 4:3 宽高比 */
      border: 2px solid #ccc;
    }
  </style>
</head>
<body>
  <div class="iframe-wrapper">
    <iframe 
      src="https://example.com" 
      class="responsive-iframe"
      allowfullscreen>
    </iframe>
  </div>
</body>
</html>
TAG：尺寸高度宽度属性像素百分比基本文档固定样式