Изображения и динамический макет
Я работаю над веб-сайтом с макетом на основе em (чтобы он мог плавно растягиваться и сжиматься, когда пользователи увеличивают или уменьшают размер шрифта). У этого сайта есть заголовок, который должен отображаться на всех страницах. У меня есть div с заголовком на всех страницах, а файл css для всего сайта включает в себя код:
#header
{
width: 50em;
height: 6em;
margin-bottom: .5em;
background: url("/IMAGES/header.png");
}
Проблема в том, что это не совсем изящно. При увеличении размера текста изменяется высота и ширина, но ** изображение не увеличивается в размере; он просто повторяет *. *
Как сделать так, чтобы изображение растягивалось и сжималось, вместо того, чтобы повторяться или обрываться? (если возможно, я бы хотел решение на основе css ... У меня уже есть несколько идей для html).
Ответы 4
Единственный способ, который я когда-либо нашел, это:
- Установите фон #header на bgcolor изображения заголовка.
- Поместите новый div внутри #header
- Разделить изображение заголовка на 2
- Установите левую половину нового изображения как #header background align-left
- Установите правую половину нового изображения как # header.div background align-right
Конечно, это будет работать только с соответствующими изображениями.
Я почти уверен, что вы не можете изменить масштаб фоновых изображений. Если ваш файл header.png был включен как тег img, вы могли бы установить его высоту и ширину равными числу ems, и браузер изменил бы его размер (хотя обычно он выглядел как дерьмо).
Помните также, что в наши дни почти все современные браузеры масштабируют страницы, что позволяет масштабировать все без значительного изменения макета. Может быть, посоветуете своим пользователям использовать эту функцию?
Невозможно использовать CSS для растягивания фонового изображения. Вам придется использовать javascript или что-то подобное. Однако, если у вас есть изображение, которое не нужно повторять (например, сливается с фоном), вы можете сделать что-то вроде этого:
background-position: center center;
background-repeat: no-repeat;
Приложение: позиция имеет следующий формат: <вверху | по центру | внизу | xpos> <left | center | right | ypos> где xpos и ypos могут быть заданы обычным образом (em, px,% и т. д.).
мне было бы интересно узнать javascript для растягивания фонового изображения ..?
@Pianosaurus, я думаю, ваша идея может быть самой простой, хотя и ограниченной. Просто не растягивайте изображение, а убедитесь, что оно хорошо выглядит, когда оно не растянуто (отцентрируйте его и не позволяйте повторяться). Кроме того, если вы используете достаточное количество отступов по краям изображения заголовка, уменьшение размера страницы также не вызовет таких больших проблем.
Для проблемы уменьшения размера вы также можете установить min-width: XXpx; и min-height: YYpx к размеру пикселя фонового изображения, если вы не хотите, чтобы элемент становился слишком маленьким.
Ознакомьтесь с stuffandnonsense.co.uk/projects/320andup и lessframework.com, чтобы узнать о некоторых из самых современных фреймворков и о том, как они работают с динамическими макетами и т. д.