[{"data":1,"prerenderedAt":256},["ShallowReactive",2],{"article-iframe-css-responsive":3},{"id":4,"title":5,"body":6,"date":245,"description":12,"extension":246,"meta":247,"navigation":168,"path":251,"rawbody":252,"seo":253,"stem":254,"__hash__":255},"content\u002Fyehangzhou\u002Fposts\u002Fiframe-css-responsive.md","如何巧妙地利用css让iframe嵌入视频\u002F地图（固定比例自适应）",{"type":7,"value":8,"toc":243},"minimark",[9,13,102,227,230,239],[10,11,12],"p",{},"宽度随屏幕 100% 变宽时，高度也按比例（比如 16:9）自动变高。那么不需要任何 JavaScript，纯 CSS 就可以完美实现。",[14,15,20],"pre",{"className":16,"code":17,"language":18,"meta":19,"style":19},"language-html shiki shiki-themes github-light github-dark","\u003Cdiv class=\"iframe-wrapper\">\n  \u003Ciframe\n    src=\"\u002F\u002Fplayer.bilibili.com\u002Fplayer.html?aid=386733968\"\n    allowfullscreen=\"allowfullscreen\"\n  >\u003C\u002Fiframe>\n\u003C\u002Fdiv>\n","html","",[21,22,23,50,59,70,81,92],"code",{"__ignoreMap":19},[24,25,28,32,36,40,43,47],"span",{"class":26,"line":27},"line",1,[24,29,31],{"class":30},"sVt8B","\u003C",[24,33,35],{"class":34},"s9eBZ","div",[24,37,39],{"class":38},"sScJk"," class",[24,41,42],{"class":30},"=",[24,44,46],{"class":45},"sZZnC","\"iframe-wrapper\"",[24,48,49],{"class":30},">\n",[24,51,53,56],{"class":26,"line":52},2,[24,54,55],{"class":30},"  \u003C",[24,57,58],{"class":34},"iframe\n",[24,60,62,65,67],{"class":26,"line":61},3,[24,63,64],{"class":38},"    src",[24,66,42],{"class":30},[24,68,69],{"class":45},"\"\u002F\u002Fplayer.bilibili.com\u002Fplayer.html?aid=386733968\"\n",[24,71,73,76,78],{"class":26,"line":72},4,[24,74,75],{"class":38},"    allowfullscreen",[24,77,42],{"class":30},[24,79,80],{"class":45},"\"allowfullscreen\"\n",[24,82,84,87,90],{"class":26,"line":83},5,[24,85,86],{"class":30},"  >\u003C\u002F",[24,88,89],{"class":34},"iframe",[24,91,49],{"class":30},[24,93,95,98,100],{"class":26,"line":94},6,[24,96,97],{"class":30},"\u003C\u002F",[24,99,35],{"class":34},[24,101,49],{"class":30},[14,103,107],{"className":104,"code":105,"language":106,"meta":19,"style":19},"language-css shiki shiki-themes github-light github-dark",".iframe-wrapper {\n  width: 100%;\n  aspect-ratio: 16 \u002F 9; \u002F* 核心：让容器始终保持 16:9 的高宽比 *\u002F\n}\n\n.iframe-wrapper iframe {\n  border: 0;\n  width: 100%;\n  height: 100%; \u002F* iframe 完美填满这个 16:9 的格子 *\u002F\n}\n","css",[21,108,109,117,136,159,164,170,179,192,205,222],{"__ignoreMap":19},[24,110,111,114],{"class":26,"line":27},[24,112,113],{"class":38},".iframe-wrapper",[24,115,116],{"class":30}," {\n",[24,118,119,123,126,129,133],{"class":26,"line":52},[24,120,122],{"class":121},"sj4cs","  width",[24,124,125],{"class":30},": ",[24,127,128],{"class":121},"100",[24,130,132],{"class":131},"szBVR","%",[24,134,135],{"class":30},";\n",[24,137,138,141,143,146,149,152,155],{"class":26,"line":61},[24,139,140],{"class":121},"  aspect-ratio",[24,142,125],{"class":30},[24,144,145],{"class":121},"16",[24,147,148],{"class":30}," \u002F ",[24,150,151],{"class":121},"9",[24,153,154],{"class":30},"; ",[24,156,158],{"class":157},"sJ8bj","\u002F* 核心：让容器始终保持 16:9 的高宽比 *\u002F\n",[24,160,161],{"class":26,"line":72},[24,162,163],{"class":30},"}\n",[24,165,166],{"class":26,"line":83},[24,167,169],{"emptyLinePlaceholder":168},true,"\n",[24,171,172,174,177],{"class":26,"line":94},[24,173,113],{"class":38},[24,175,176],{"class":34}," iframe",[24,178,116],{"class":30},[24,180,182,185,187,190],{"class":26,"line":181},7,[24,183,184],{"class":121},"  border",[24,186,125],{"class":30},[24,188,189],{"class":121},"0",[24,191,135],{"class":30},[24,193,195,197,199,201,203],{"class":26,"line":194},8,[24,196,122],{"class":121},[24,198,125],{"class":30},[24,200,128],{"class":121},[24,202,132],{"class":131},[24,204,135],{"class":30},[24,206,208,211,213,215,217,219],{"class":26,"line":207},9,[24,209,210],{"class":121},"  height",[24,212,125],{"class":30},[24,214,128],{"class":121},[24,216,132],{"class":131},[24,218,154],{"class":30},[24,220,221],{"class":157},"\u002F* iframe 完美填满这个 16:9 的格子 *\u002F\n",[24,223,225],{"class":26,"line":224},10,[24,226,163],{"class":30},[10,228,229],{},"举个例子",[35,231,235],{"className":232,"style":234},[233],"iframe-wrapper","width: 100%;aspect-ratio: 16 \u002F 9;",[89,236],{"style":237,"src":238,"allowFullScreen":168},"width: 100%;height: 100%;border: 0;","\u002F\u002Fplayer.bilibili.com\u002Fplayer.html?aid=386733968",[240,241,242],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":19,"searchDepth":52,"depth":52,"links":244},[],"2026-06-30 12:56:49","md",{"tags":248,"image":19},[249,250,106,89],"前端","自适应","\u002Fyehangzhou\u002Fposts\u002Fiframe-css-responsive","---\ntitle: '如何巧妙地利用css让iframe嵌入视频\u002F地图（固定比例自适应）'\ndescription: '宽度随屏幕 100% 变宽时，高度也按比例（比如 16:9）自动变高。那么不需要任何 JavaScript，纯 CSS 就可以完美实现。'\ndate: 2026-06-30 12:56:49\ntags: ['前端', '自适应', 'css', 'iframe']\nimage: ''\n---\n\n宽度随屏幕 100% 变宽时，高度也按比例（比如 16:9）自动变高。那么不需要任何 JavaScript，纯 CSS 就可以完美实现。\n\n```html\n\u003Cdiv class=\"iframe-wrapper\">\n  \u003Ciframe\n    src=\"\u002F\u002Fplayer.bilibili.com\u002Fplayer.html?aid=386733968\"\n    allowfullscreen=\"allowfullscreen\"\n  >\u003C\u002Fiframe>\n\u003C\u002Fdiv>\n```\n\n```css\n.iframe-wrapper {\n  width: 100%;\n  aspect-ratio: 16 \u002F 9; \u002F* 核心：让容器始终保持 16:9 的高宽比 *\u002F\n}\n\n.iframe-wrapper iframe {\n  border: 0;\n  width: 100%;\n  height: 100%; \u002F* iframe 完美填满这个 16:9 的格子 *\u002F\n}\n```\n\n举个例子\n\n\u003Cdiv class=\"iframe-wrapper\" style=\"width: 100%;aspect-ratio: 16 \u002F 9;\">\n\u003Ciframe style=\"width: 100%;height: 100%;border: 0;\" src=\"\u002F\u002Fplayer.bilibili.com\u002Fplayer.html?aid=386733968\" allowfullscreen=\"allowfullscreen\">\u003C\u002Fiframe>\n\u003C\u002Fdiv>\n",{"title":5,"description":12},"yehangzhou\u002Fposts\u002Fiframe-css-responsive","4qq1yQTyufGEy6lRmbeXXUke2VyPssQTO2DlaYToGS8",1784926477025]