{"id":3541,"date":"2019-05-15T13:41:38","date_gmt":"2019-05-15T05:41:38","guid":{"rendered":"https:\/\/www.yewen.us\/blog\/?p=3541"},"modified":"2019-05-15T13:41:38","modified_gmt":"2019-05-15T05:41:38","slug":"bilibili-iframe-aspect-ratio","status":"publish","type":"post","link":"https:\/\/www.yewen.us\/blog\/2019\/05\/bilibili-iframe-aspect-ratio\/","title":{"rendered":"\u5982\u4f55\u5f97\u5230\u4e00\u4e2a\u81ea\u9002\u5e94\u5bbd\u5ea6\u7684\u9ad8\u5bbd\u6bd4\u56fa\u5b9a\u7684 HTML \u5bb9\u5668"},"content":{"rendered":"<p>\u5199\u4e0a\u4e00\u7bc7\u6587\u7ae0\u65f6\u9047\u5230\u4e86\u4e00\u4e2a\u95ee\u9898\uff0c\u6211\u60f3\u63d2\u5165\u4e00\u4e2a bilibili \u7684 iframe \u6765\u5d4c\u5165\u89c6\u9891\uff0c\u5982\u679c\u76f4\u63a5\u7528 B \u7ad9\u7ed9\u7684 iframe \u4ee3\u7801\uff0c\u51fa\u6765\u7684\u662f\u5f88\u5c0f\u7684\u4e00\u5757\uff0c\u5f3a\u884c\u628a iframe \u7684 width \u53d8\u6210 100% \u540e\uff0c\u5bbd\u5ea6\u662f\u81ea\u9002\u5e94\u6491\u5f00\u4e86\uff0c\u9ad8\u5ea6\u8fd8\u662f\u53ea\u6709\u4e00\u70b9\u70b9\u9ad8\uff0c\u7136\u540e height \u600e\u4e48\u5199\u90fd\u4e0d\u592a\u5bf9\uff0c\u5982\u679c\u518d\u8003\u8651\u624b\u673a\u7b49\u5c0f\u5c4f\u5e55\u8bbe\u5907\u9700\u8981\u81ea\u9002\u5e94\u5bbd\u5ea6\uff0c\u8fd9\u4e2a\u66f4\u65e0\u89e3\u4e86\u3002\u641c\u4e86\u4e00\u5708\uff0c\u627e\u5230\u4e86\u4e00\u7bc7\u6587\u7ae0<a href=\"https:\/\/www.potatofield.cn\/%E3%80%90%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0%E3%80%91%E4%BD%BF%E7%94%A8iframe%E5%B5%8C%E5%85%A5%E7%AD%89%E6%AF%94%E7%BC%A9%E6%94%BE%E7%9A%84%E5%93%94%E5%93%A9%E5%93%94%E5%93%A9%E8%A7%86%E9%A2%91\/\" rel=\"noopener noreferrer\" target=\"_blank\">\u3010\u524d\u7aef\u7b14\u8bb0\u3011\u4f7f\u7528iframe\u5d4c\u5165\u7b49\u6bd4\u7f29\u653e\u7684\u54d4\u54e9\u54d4\u54e9\u89c6\u9891<\/a>\uff0c\u6309\u8fd9\u4e2a\u505a\u6cd5\u89e3\u51b3\u4e86\u95ee\u9898<\/p>\n<p>\u4ed4\u7ec6\u770b\u4e86\u4e0b\u5b9e\u73b0\uff0c\u5176\u5b9e\u633a\u6709\u610f\u601d\u7684\uff0c\u5e94\u8be5\u53ef\u4ee5\u7b97\u524d\u7aef\u7684\u4e00\u4e2a\u7ecf\u5178\u95ee\u9898\uff0c\u5c31\u662f\u5982\u4f55\u8bbe\u5b9a\u4e00\u4e2a HTML \u5143\u7d20\uff0c\u80fd\u505a\u5230\u81ea\u9002\u5e94\u5bbd\u5ea6\uff0c\u4e14\u9ad8\u5bbd\u6bd4\u56fa\u5b9a<\/p>\n<p>\u4e00\u822c\u6211\u4eec\u9700\u8981\u7ef4\u6301\u9ad8\u5bbd\u6bd4\u7684\u662f\u56fe\u7247\uff0c\u8fd9\u4e2a\u5728 <code>&lt;img&gt;<\/code> \u6807\u7b7e\u4e0a\u53ef\u4ee5\u6709\u5404\u79cd\u7f29\u653e\u9009\u9879\u80fd\u6ee1\u8db3\u9700\u6c42\u3002\u5bf9\u4e8e\u89c6\u9891\uff0c\u6216\u8005 iframe \u5d4c\u5165\uff0c\u5219\u6ca1\u6709\u6bd4\u8f83\u597d\u7684\u539f\u751f\u5b9e\u73b0\u65b9\u5f0f\u3002\u5728\u4e0a\u9762\u627e\u5230\u7684\u90a3\u4e2a\u6587\u7ae0\u91cc\uff0c\u5176\u5b9e\u662f\u5148\u6784\u5efa\u4e00\u4e2a\u80fd\u81ea\u9002\u5e94\u5bbd\u5ea6\u4e14\u9ad8\u5bbd\u6bd4\u56fa\u5b9a\u7684 HTML \u5bb9\u5668\uff08\u4e00\u4e2a <code>position: relative<\/code> \u7684 <code>&lt;div&gt;<\/code>\uff09\uff0c\u7136\u540e\u628a\u771f\u6b63\u8981\u505a\u5230\u81ea\u9002\u5e94\u7684\u5143\u7d20\u653e\u5230\u8fd9\u4e2a\u5bb9\u5668\u91cc\uff0c\u5e76\u7528\u7edd\u5bf9\u5b9a\u4f4d\u5360\u6ee1\u7a7a\u95f4\uff0c\u90a3\u4e48\u95ee\u9898\u4ece\u600e\u4e48\u8bbe\u5b9a\u8fd9\u4e2a\u5143\u7d20\u5c5e\u6027\u53d8\u6210\u600e\u4e48\u5f97\u5230\u53ef\u4ee5\u81ea\u9002\u5e94\u5bbd\u5ea6\u4e14\u9ad8\u5bbd\u6bd4\u56fa\u5b9a\u7684\u4e00\u4e2a\u5bb9\u5668<\/p>\n<p>\u6309\u641c\u5230\u7684\u90a3\u4e2a\u5b9e\u73b0\u505a\uff0c\u662f\u7528\u4e00\u4e2a\u7a7a <code>&lt;div&gt;<\/code>\uff0c\u5148\u8bbe\u5b9a\u5bbd\u5ea6 <code>width: 100%<\/code> \u53ef\u4ee5\u505a\u5230\u81ea\u9002\u5e94\u5bbd\u5ea6\uff0c\u63a5\u7740\u4e3a\u4e86\u7ef4\u6301\u9ad8\u5bbd\u6bd4\uff0c\u5148\u5f3a\u884c\u8bbe\u5b9a\u9ad8\u5ea6 <code>height: 0<\/code>\uff0c\u7136\u540e\u7528 <code>padding-bottom: 75%<\/code> \u6765\u505a\u5230\u7b49\u6bd4\u6491\u5f00\u3002\u8fd9\u91cc\u7684\u767e\u5206\u6bd4\u8ba1\u7b97\u662f\u6309\u7167\u5bbd\u5ea6\u6765\u8ba1\u7b97\u7684\uff0c\u8be6\u7ec6\u7684\u5b9a\u4e49\u53ef\u4ee5\u770b w3.org \u91cc\u5173\u4e8e box \u5143\u7d20 padding-properties \u7684\u5b9a\u4e49 <a href=\"http:\/\/www.w3.org\/TR\/2011\/REC-CSS2-20110607\/box.html#padding-properties\" rel=\"noopener noreferrer\" target=\"_blank\">http:\/\/www.w3.org\/TR\/2011\/REC-CSS2-20110607\/box.html#padding-properties<\/a>\u3002\u641c\u7d22\u7ed3\u679c\u91cc\u4e5f\u90fd\u6709\u8fd9\u4e48\u6765\u4ecb\u7ecd\uff0c\u6bd4\u5982\u8fd9\u4e24\u4f8b\uff1a<\/p>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/aspect-ratio-boxes\/\" rel=\"noopener noreferrer\" target=\"_blank\">Aspect Ratio Boxes | CSS-Tricks<\/a><\/li>\n<li><a href=\"https:\/\/stackoverflow.com\/a\/10441480\/1979585\" rel=\"noopener noreferrer\" target=\"_blank\">Maintain the aspect ratio of a div with CSS | StackOverflow<\/a><\/li>\n<\/ul>\n<p>\u4eca\u5929\u95ee\u516c\u53f8\u7684\u524d\u7aef\u62c5\u5f53 @tdzl2003\uff0c\u7ed9\u51fa\u4e86\u53e6\u4e00\u4e2a\u601d\u8def\u6e05\u5947\u7684\u64cd\u4f5c\uff0c\u76f4\u63a5\u585e\u4e00\u4e2a\u6bd4\u4f8b\u56fe\u7247\u8fdb\u53bb\uff0c\u7136\u540e\u628a\u8fd9\u4e2a\u56fe\u7247\u6491\u5f00\u5c31\u884c\u4e86\uff0c\u56fe\u7247\u53ef\u4ee5\u7528\u900f\u660e\u8272\uff0c\u800c\u4e14 base64 \u7f16\u7801\u540e\u7684\u56fe\u5e76\u6ca1\u6709\u591a\u5927\uff0c\u4e0d\u4f1a\u5f71\u54cd\u89c6\u89c9\u6548\u679c\u4e5f\u4e0d\u5f71\u54cd\u6027\u80fd\uff0c\u6bd4\u5982\u8981 4:3 \u5c31\u5f04\u4e00\u4e2a 4 \u50cf\u7d20\u5bbd 3 \u50cf\u7d20\u9ad8\u7684\u7a7a\u767d\u56fe<\/p>\n<p>\u679c\u7136\u524d\u7aef\u90fd\u662f\u5404\u79cd\u9a9a\u64cd\u4f5c\uff0c\u5404\u79cd\u7ed9\u8dea<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5199\u4e0a\u4e00\u7bc7\u6587\u7ae0\u65f6\u9047\u5230\u4e86\u4e00\u4e2a\u95ee\u9898\uff0c\u6211\u60f3\u63d2\u5165\u4e00\u4e2a bilibili \u7684 iframe \u6765\u5d4c\u5165\u89c6\u9891\uff0c\u5982\u679c\u76f4\u63a5\u7528 B \u7ad9 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[7],"tags":[505,77,692,591],"class_list":["post-3541","post","type-post","status-publish","format-standard","hentry","category-tech-notes","tag-bilibili","tag-html","tag-iframe","tag-591"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p4aR5e-V7","_links":{"self":[{"href":"https:\/\/www.yewen.us\/blog\/wp-json\/wp\/v2\/posts\/3541","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yewen.us\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yewen.us\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yewen.us\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yewen.us\/blog\/wp-json\/wp\/v2\/comments?post=3541"}],"version-history":[{"count":2,"href":"https:\/\/www.yewen.us\/blog\/wp-json\/wp\/v2\/posts\/3541\/revisions"}],"predecessor-version":[{"id":3543,"href":"https:\/\/www.yewen.us\/blog\/wp-json\/wp\/v2\/posts\/3541\/revisions\/3543"}],"wp:attachment":[{"href":"https:\/\/www.yewen.us\/blog\/wp-json\/wp\/v2\/media?parent=3541"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yewen.us\/blog\/wp-json\/wp\/v2\/categories?post=3541"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yewen.us\/blog\/wp-json\/wp\/v2\/tags?post=3541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}