宽屏（视频、图片）通用代码。

起个网名好难

1. <div style="width:1200px; height:675px; position:absolute;left:50%; transform:translate(-50%); margin-top:80px;">
2. <iframe frameborder="0" scrolling="no" src="https://www.ixigua.com/iframe/7371724927953306164?autoplay=1"
3. style="width:100%; height:100%;"></iframe>
4. </div>
5. <div style="height: 800px;"></div>

复制代码

发视频帖的代码，粗略解释下

第一行：
width:1200px; height:675px; 视频的宽和高，可以根据自己需要设置；
position:absolute;left:50%; transform: translate(-50%); 设置视频画面居中用的；
margin-top:80px; 上端留空的设置，这个数值随意，大些就空得多点。

第二、三行：是真正得发视频代码，注意第三行里 width:100%; height:100%;

第五行： height: 800px; 补偿高度 = 视频高度（675）+ 留空（80）+ 适当裕度

起个网名好难

1. <div style="width:1500px; height:844px; position:absolute;left:50%; transform:translate(-50%); margin-top:80px;">
2. <img src="https://pic.rmb.bdstatic.com/bjh/news/ad93b697cc40360d49ef75afb9bf1573.jpeg"
3. style="width:100%px; height:100%; ">
4. </div>
5. <div style="height: 1000px;"></div>

复制代码

发视图片的代码，粗略解释下

第一行：
width:1500px; height:844px; 图片的宽和高，可以根据自己需要设置；
position:absolute;left:50%; transform: translate(-50%); 设置图片居中用的；
margin-top:80px; 上端留空的设置，这个数值随意，大些就空得多点。

第二、三行：是真正的发图片代码，注意第三行里 width:100%; height:100%;

第五行： height: 1000px; 补偿高度 = 图片高度（844）+ 留空（80）+ 适当裕度

起个网名好难

对照1#、2#看两者（形式上）相同的，搞明白一个另一个也就明白了。

需要根据自己情况修改的就三个数值： 宽、高 和 补偿高度

西湖

起个网名好难 发表于 2024-10-17 09:03
对照1#、2#看两者（形式上）相同的，搞明白一个另一个也就明白了。

收藏了，慢慢消化，谢谢老师！

风清

起个网名好难 发表于 2024-10-17 09:03
对照1#、2#看两者（形式上）相同的，搞明白一个另一个也就明白了。

谢谢老师无私奉献！我收藏学习！
上午好！

吴林海

欣赏你的宽屏（视频、图片）精美制作，点赞！

微尘

谢谢你的介绍，很实用的视频，图片宽屏代码，学习收藏了。你辛苦了。

月婵

欣赏 宽屏（视频、图片）通用代码。好作品！

老谟深虑

       谢谢难难老师的教程指导，辛苦了！

老钟

谢谢老师无私奉献！点赞！