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

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

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

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

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

4 ответа

Решение

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

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

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

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

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

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

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

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

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

Другие вопросы по тегам