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

Question

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

3

我对HTML还很陌生，对HTML术语也不是很熟悉（包括英语）。我正在尝试创建演示幻灯片（类似于MS Office中的Powerpoint）。功能应该如下：

幻灯片内的所有内容（文本、图片等）在幻灯片调整大小时必须保持位置、大小和比例。
幻灯片具有4:3的分辨率。
幻灯片应由
元素实现。
幻灯片位于屏幕中央。
幻灯片内不应使用任何内联样式。
必须使用纯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>

这是解决我的问题的好方案吗，还有更简单/更高效/更健壮或更“Pro”的方法吗？

是否可以在不使用Javascript的情况下解决它？至少部分地解决。

是否有一种简单的方法来指定相对于幻灯片边缘的任何元素的x/y偏移量（例如作为属性）？

如何为幻灯片元素树中深度可变的元素应用样式？

对我所询问的任何事情的帮助都将不胜感激。

- Kupto

如果你只是想在窗口大小改变时调整div的大小，那看起来还不错。但是这样做不会调整图片的大小。 - btevfik

我不知道你是否被允许使用任何外部插件。但这个真的很好用，可以调整字体大小http://fittextjs.com/ 或者，我猜你需要循环遍历子元素并调整它们的字体大小。 - btevfik

@btevfik 不幸的是 =( 不允许使用插件...那里的JavaScript能否减少一些？我希望居中的事情可以以不同的方式完成。另外，我该如何循环并进行更改？ - Kupto

是的，我已经阅读了关于这个插件的内容，它已经在论坛中被提及过了。 - Kupto

如何将div居中？你可以使用margin:0 auto并设置一个宽度，比如50%。 - btevfik

显示剩余5条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- btevfik · Accepted Answer

这基本上与你的代码相同，但不需要在JavaScript中显式设置margin。因此，请删除该部分并将margin: 0 auto;设置在包装器上。

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

似乎你可以只使用CSS和HTML来保持宽高比，但据我所知，这仅在调整窗口宽度时有效。当你改变高度时，它不起作用。使用CSS维护div的宽高比