文本适合我网页中的框

Question

我有一张大图片作为我网页的背景。图像在图像本身内部包含一个框。我将如何在该背景图像上放置文本以使其适合框，并相应地缩小或调整大小（在背景调整大小时以其他分辨率）？

Answer 1

如果您希望调整包含文本的“框”的大小，您应该能够使用 CSS 将元素的尺寸设置为基于百分比的宽度和高度值。

如果您想调整元素内的文本大小，那么您可能需要考虑使用 JavaScript（可能是 jQuery）以设定的时间间隔轮询窗口的大小，并根据新的窗口尺寸调整文本大小。

编辑：为了澄清，您应该能够将文本框（可能是 div）的尺寸设置为页面的百分比。例如，包含文本的 div 可能是窗口宽度的 80% 和高度的 80%。然后，您可以将边距设置为“自动”。这应该会导致框周围的边距和尺寸与窗口宽度成比例。

例子：

 <style type="text/css">
    div#box {
    height: 80%;
    width: 80%;
    margin: auto;
    }
</style>
<div id="box">Text goes here.</div>

这将导致“盒子” div 在页面上水平居中，但垂直居中有点棘手。您可能需要查看 this page 以了解如何将其垂直居中以保持在背景框中。

根据其他人的建议，您还可以将框背景设置为文本容器的背景，而不是整个页面背景。这可能会更容易一些，但我认为您仍然需要使用基于百分比的宽度和高度属性以及自动边距来很好地居中。

Answer 2

您的解决方案的问题是它非常不可扩展，对不同的浏览器不友好，并且随着您的网站扩展会导致更多问题。

尝试将框与其他 bg 图像分开，并将框图像用作包含文本的 div 的背景。

Answer 3

对于初学者，您无法调整背景图片的大小。此外，调整文本大小需要 Javascript 或页面刷新。

尝试在http://www.jsfiddle.net 上做一个例子，以便人们更好地了解您所描述的内容。

更新

你的问题还不清楚，我强烈推荐 jsfiddle。但是，如果我的解释正确……您使用的是 FancyBox，这表明您的页面运行了一些 Javascript。 Javascript 可用于查找您的文本是否溢出容器，并可以相应地调整其大小。

为此，请获取您的<div>（或容器元素）并检查其.scrollHeight 和.clientHeight 属性。如果滚动小于客户端，则不需要调整文本大小。如果滚动大于客户端，您可以使用.style.fontSize 属性调整大小。

我所描述的未经测试示例如下：

myDiv = $('containerElement'); // Get container object using its ID
size = 50;  // Start with 50px font size

while(myDiv.scrollHeight > myDiv.clientHeight) {
  // Decrement font size until scroll is less than client
  myDiv.style.fontSize = (size - 1) + 'px';
}

您必须在这方面做一些跑腿工作才能让它按您喜欢的方式工作。注意事项：

• 我使用 Dollar 函数获取了一个对象，您可以 google 获取更多信息
• 您的容器必须已定义尺寸以便.clientHeight 查找
• 您可能需要尝试.offsetHeight 而不是.clientHeight

如果你只是想控制溢出，你可以使用 CSS：

• overflow-x:hidden 或滚动或自动，overflow-y 同理
• white-space:nowrap 将阻止自动换行

但是，再一次，我的回答很模糊，因为不清楚（通过代码）你在问什么。