Изображения и динамический макет - PullRequest
Новая
       33

Изображения и динамический макет

1 голос
/ 10 декабря 2008

Я работаю над сайтом с макетом на основе em (чтобы он мог плавно растягиваться и сжиматься, когда пользователи увеличивают или уменьшают размер шрифта). Этот сайт имеет заголовок, который должен отображаться на всех страницах. У меня есть div "header" на всех страницах, и файл css для всего сайта содержит код: 

#header
{
    width: 50em;
    height: 6em;
    margin-bottom: .5em;
    background: url("/IMAGES/header.png");
}

Проблема в том, что это не изящно растягивается. При увеличении размера текста высота и ширина изменяются, но ** изображение не увеличивается в размере; это просто повторяется *. *

Как мне сделать растягивание и сжатие моего изображения вместо того, чтобы повторять или обрезать его? (Я бы хотел использовать решение на основе CSS, если это возможно ... магазин, уже).

Ответы [ 4 ]

0 голосов
/ 10 декабря 2008

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

0 голосов
/ 10 декабря 2008

Я почти уверен, что вы не можете изменить масштабирование фоновых изображений. Если ваш файл header.png был включен в качестве тега img, то вы можете установить его высоту и ширину равным ems, и браузер изменит его размер (хотя обычно он выглядит как дерьмо).

Помните также, что почти все современные браузеры в наши дни делают масштабирование страниц, что позволит масштабировать все без чрезмерного изменения макета. Возможно, расскажите своим пользователям использовать эту функцию?

0 голосов
/ 10 декабря 2008

Нет способа использовать css для растягивания фонового изображения. Вы должны будете использовать JavaScript или что-то подобное. Однако, если у вас есть изображение, которое не нужно повторять (например, вписывается в фон), вы можете сделать что-то вроде этого: 

background-position: center center;
background-repeat: no-repeat;

Добавление: позиция имеет следующий формат: где xpos и ypos можно задавать обычным образом (em, px,% и т. д.).

0 голосов
/ 10 декабря 2008

Единственный способ, который я когда-либо нашел:

  • Установить для фона #header значение bgcolor изображения заголовка.
  • Поместить новый div внутри # header
  • Разделить изображение заголовка на 2
  • Установить левую половину нового изображения как #header background выравнивание по левому краю
  • Установить правую половину нового изображения в качестве # header.div фон выравнивания по правому краю

Конечно, это будет работать только с соответствующими изображениями.

...