文本适合我网页中的框内

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>

这将导致“box”div 在页面上水平居中，但垂直居中有点棘手。您可能需要查看此页面来弄清楚如何将其垂直居中以保持在背景中的框内。

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

Answer 2

首先，您无法调整背景图像的大小。此外，调整文本大小将需要 JavaScript 或页面刷新。

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

更新

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

为此，请获取

（或容器元素）并检查其 .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< /code> 而不是 .clientHeight

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

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

但是，我的答案再次含糊不清，因为不清楚（用代码）您要问什么。

Answer 3

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

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