3

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

4

3 回答 3

3

如果您正在寻找调整包含文本的“框”的大小，您应该能够使用 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 在页面上水平居中，但垂直居中有点棘手。您可能需要查看此页面以了解如何将其垂直居中以保持在背景框中。

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

于 2010-12-29T06:29:04.117 回答
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将防止自动换行

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

于 2010-12-29T06:18:22.507 回答
1

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

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

于 2010-12-29T07:50:10.663 回答