Question

我对HTML很陌生，并且不太熟悉HMTL术语（英语也是:)。我正在尝试创建演示文稿幻灯片（类似于MS Office中的Powerpoint）。功能应该是：

幻灯片中的所有内容（文本，图片等）必须在幻灯片调整大小时保持相对于幻灯片的位置，大小和比例。
幻灯片的分辨率为4：3。
幻灯片应该由<div>元素实现。
幻灯片停留在屏幕中间。
不应在幻灯片中使用内联样式。
必须使用普通的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偏移量？

如何为滑动元素树中可变深度的元素应用样式？

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

Answer 1

这与您的基本相同，但没有在javascript中明确设置margin。所以删除该部分并在包装器上创建margin: 0 auto;。

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

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

Maintain the aspect ratio of a div with CSS

HTML演示幻灯片，元素调整大小以保持比例

1 个答案: