HTML高度与宽度设置 Iframe
2025-04-24
20
参考资料
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>
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
