Изображения и динамический макет
Я работаю над сайтом с макетом на основе 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;
Приложение: Позиция имеет следующий формат:
Единственный способ, который я когда-либо нашел:
- Установить фон #header в bgcolor заголовка изображения.
- Поместите новый div в #header
- Разделить изображение заголовка на 2
- Установить левую половину нового изображения как фон #header выровненный по левому краю
- Установить правую половину нового изображения в качестве # header.div фон выравнивания по правому краю
Конечно, это будет работать только с соответствующими изображениями.
@Pianosaurus, я думаю, что ваша идея может быть самой простой, хотя и ограниченной. Просто не растягивайте изображение, но убедитесь, что оно выглядит хорошо, когда оно не растянуто (отцентрируйте его и не позволяйте повторяться). Кроме того, если вы используете достаточное количество отступов по краям изображения заголовка, изменение размера страницы также не вызовет таких больших проблем.
Я уверен, что вы не можете изменить масштабирование фоновых изображений. Если ваш файл header.png был включен как img
тег, то вы можете установить его высоту и ширину, чтобы быть числом ems
и браузер изменит его размер (обычно делая его похожим на дерьмо).
Помните также, что почти все современные браузеры в наши дни делают масштабирование страниц, что позволит масштабировать все без чрезмерного изменения макета. Возможно, скажите своим пользователям использовать эту функцию?