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在页面上水平居中，但垂直居中有点棘手。您可能希望查看this page以了解如何将其垂直居中以保持在背景框内。

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

Answer 2

对于初学者，您无法调整背景图片的大小。此外，调整文本大小将需要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';
}

你必须在这方面做一些小工作，让它按照你喜欢的方式工作。注意事项：

我使用美元功能获取对象，您可以谷歌搜索更多信息
您的容器必须已定义.clientHeight的维度才能找到
您可能需要尝试.offsetHeight而不是.clientHeight

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

overflow-x:hidden或滚动或自动，overflow-y是相同的
white-space:nowrap会阻止自动文字换行

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

Answer 3

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

尝试将该框与其他bg图像分开，并使用框图像作为您拥有文本的div的背景。

文本适合我的网页框内

3 个答案: