текст помещается в поле на моей веб-странице - PullRequest
3 голосов
/ 29 декабря 2010

У меня есть одно большое изображение в качестве фона для моей веб-страницы.Изображение содержит прямоугольник внутри самого изображения.Как разместить текст на этом фоновом изображении таким образом, чтобы он помещался в рамку, и соответственно уменьшать или изменять его размер (в других разрешениях, когда фон изменяется)?

Ответы [ 3 ]

3 голосов
/ 29 декабря 2010

Если вы хотите изменить размер «ящика», содержащего текст, вы должны иметь возможность установить размеры элемента на основе значений ширины и высоты в процентах с помощью 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 "box" будет центрироваться горизонтально на странице, но вертикальное центрирование будет немного сложнее. Возможно, вы захотите взглянуть на эту страницу , чтобы понять, как расположить ее вертикально по центру, чтобы оставаться в рамке на заднем плане.

Как предложил другой человек, вы также можете сделать фон окна только фоном контейнера текста, а не весь фон страницы. Это может быть немного проще, но я думаю, что вам все равно придется использовать основанные на процентах атрибуты ширины и высоты и автоматическое поле для удобного центрирования.

2 голосов
/ 29 декабря 2010

Для начала, вы не можете изменить размер фонового изображения.Кроме того, для изменения размера текста потребуется 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';
}

Вам придется немного поработать над этим, чтобы заставить его работать так, как вам нравится.На заметку:

  • Я использовал функцию доллара, чтобы получить объект, вы можете найти его в Google для получения дополнительной информации
  • В вашем контейнере должны быть определены размеры, чтобы .clientHeight нашел
  • Возможно, вам придется попробовать .offsetHeight вместо .clientHeight

Если вы просто хотите контролировать переполнение, вы можете использовать CSS:

  • overflow-x:hidden или прокрутка или авто, overflow-y то же самое
  • white-space:nowrap предотвратит автоматическое перенос текста

Но, опять же, мой ответ неопределенный, так как неясен(с кодом), что вы спрашиваете.

1 голос
/ 29 декабря 2010

Проблема с вашим решением заключается в том, что оно очень не масштабируется, не подходит для разных браузеров и вызовет больше проблем по мере расширения вашего сайта.

Попробуйте отделить рамку от другого изображения bg и использовать изображение рамкив качестве фона для div у вас есть текст.

...