参考资料

  1. HTML 超链接
  2. HTML 表格背景
  3. Excel转HTML表格有哪些
  4. HTML 输出
  5. HTML 图像格式化
  6. html列表标签详细说明以及案例
  7. HTML 文本格式化
  8. HTML使用表格 布局

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：尺寸高度宽度属性像素百分比基本文档固定样式

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。