photostack_image.html 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <!DOVTYPE html><!--告诉解析器,解析HTML文件(这是一个HTML5文件,版本也会在这里,html默认是H5) -->
  2. <html><!-- html标签是最外围的标签,除了上面的解析的标签其他的都在它的内部 -->
  3. <head><!-- 页面的“头”,不可或缺,页面的名称,属性,等等都在他这里。 -->
  4. <meta lang="en"><!-- 语言en是英语,网上有可以查到 -->
  5. <meta charset="UTF-8"><!-- 解析编码推荐utf-8 -->
  6. <title>video</title><!-- 页面的名称 -->
  7. <style>
  8. <!-- css样式也可以写在这里 -->
  9. body{
  10. margin:0;/* 外边距0 */
  11. padding:0;/* 内边距0 */
  12. }
  13. /* 这个规则规定了iframe父元素容器的尺寸,我们要去它的宽高比应该是 25:14 */
  14. .aspect-ratio {
  15. position: relative;
  16. width: 100%;
  17. height: 100%;
  18. }
  19. /* 设定iframe的宽度和高度,让iframe占满整个父元素容器 */
  20. .aspect-ratio img {
  21. position: absolute;
  22. width: 100%;
  23. height: 100%;
  24. left: 0;
  25. top: 0;
  26. background-color:#ffffff;
  27. }
  28. </style>
  29. </head>
  30. <body><!-- 页面上看到的所有东西都在这里了 -->
  31. <div class="aspect-ratio">
  32. ##replacement##
  33. </div>
  34. </body>
  35. </html>