3

我对 HTML 很陌生,对 HMTL 术语(英语也是如此:)不是很流利。我正在尝试创建演示幻灯片(类似于 MS Office 中的 Powerpoint)。功能应该是:

  1. 当幻灯片调整大小时,幻灯片内的所有内容(文本、图片等)都必须保持相对于幻灯片的位置、大小和比例。
  2. 幻灯片的分辨率为 4:3。
  3. 幻灯片应该通过<div>元素来实现。
  4. 幻灯片停留在屏幕中间。
  5. 幻灯片内不应使用内联样式。
  6. 必须使用纯 Javascript、css 和 HTML。

到目前为止,我已经设法设计了这个:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>
Image Resize Test
</title>
<style type="text/css">
*
{
   margin: 0;
}
body
{
   background-color: black;
   width: 100%;
   height: 100%;
}
#wrapper
{
   font-size:100%;
   background-color: white;
   display: block;
   position: absolute;
   left: 50%;
}
#content
{
   font-family:"Times New Roman";
   font-size:80%;
}

h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
</style>
<script>
   window.onload = function()
   {
      window.onresize();
   }

   window.onresize = function()
   {
        var width = window.innerWidth;
        var height = window.innerHeight;

        if (width / 4 > height / 3)
        {
           width = height / 3 * 4;
        }
        else
        {
           height = width / 4 * 3;
        }
        var wrapper = document.getElementById("wrapper");
        wrapper.style.height = height + "px";
        wrapper.style.width = width + "px";
        wrapper.style.marginLeft = (-width/2) + "px";
        wrapper.style.fontSize = (height) + "%";
   }
</script>
</head>
<body>
<div id="wrapper">
  <div id="content">
  <H1>
  aaaa
  </H1>
  <H2>
  bbbb
  </H2>
  <p>cccc</p>
    text
  </div>
</body>
</html>

这是解决我的问题的好方法,还是有更简单/更有效/更强大或更“专业”的方法来做到这一点?

没有Javascript可以解决吗?至少部分。

有没有一种方法可以轻松地为幻灯片中的任何元素(可能作为属性)指定相对于侧面的 x/y 偏移量?

如何为幻灯片元素树中不同深度的元素应用样式?

对我提出的任何问题的帮助将不胜感激。

4

1 回答 1

1

这与您的基本相同,但没有margin在 javascript 中明确设置。所以删除那部分并margin: 0 auto;在包装上制作。

http://jsfiddle.net/btevfik/VuqJX/


似乎您可以仅使用 css 和 html 保持纵横比,但据我所知,这仅在您调整窗口宽度时才有效。当你改变高度时,它不会工作。

使用 CSS 保持 div 的纵横比

于 2013-04-03T07:49:26.703 回答