Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.91/11: Рейтинг темы: голосов - 11, средняя оценка - 4.91
14 / 14 / 0
Регистрация: 16.04.2011
Сообщений: 236

Сохранение пропорций фонового изображения при резиновой верстке

27.02.2015, 20:17. Показов 2281. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Есть фоновое изображение, кторое тянется на 100% ширины. Как сделать, чтобы при изменение ширины страницы, изменялась и высота изображения?
0
Лучшие ответы (1)
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
27.02.2015, 20:17
Ответы с готовыми решениями:

Сохранение пропорций изображения при изменении рамзеров окна браузера?
наглядный пример масштабирования картинки при изменении окна браузера - просто картинка, открытая в браузере, попробуйте поизменять окно...

Размер шрифта при резиновой верстке
При резиновой верстке размер блоков и графических изображений изменяется в пропорции к ширине экрана. А можно ли задать размер шрифта...

Сохранение фонового изображения
Здрасте. В программе реализован выбор изображения для фона -- из нескольких стандартных и любого своего. вопрос: как реализовать...

2
 Аватар для Давран
203 / 152 / 44
Регистрация: 24.11.2013
Сообщений: 1,106
27.02.2015, 21:22
Magellan_,
есть такая jq функция
JavaScript
1
2
3
$(window).resize(function(){
 
});
она будет срабатывать когда окно изменяется в размерах

Добавлено через 1 минуту
JavaScript
1
$(window).width();
вернет ширину окна
1
 Аватар для alexhit
11 / 11 / 8
Регистрация: 13.02.2015
Сообщений: 61
28.02.2015, 01:57
Лучший ответ Сообщение было отмечено Magellan_ как решение

Решение

HTML5
1
<div class="bg"></div>
CSS
1
2
3
4
5
6
7
8
9
html, body {background:none;}
.bg {
        width:100%; height:100%; position:fixed; z-index:-1;
    background: no-repeat center center url(img.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
28.02.2015, 01:57
Помогаю со студенческими работами здесь

О резиновой верстке
Здравствуйте. Я новичок по версткам, есть вопрос)) http://wmrepair.ru вот сайт, хочу сделать, чтобы при уменьшении масштаба телефон и...

Проблемы в резиновой верстке
Здравствуйте. У меня простейшая резиновая верстка съезжает. Что делать? &lt;style&gt; .q{ float: left; width: 300px; background:...

Меню на резиновой верстке
Уважаемые дамы и господа, подскажите как отцентровать менюшку (которая генерируется из массива) по центру экрана. Шапка, контент и футер...

div в центре на резиновой верстке
как можно сделать что бы блок был всегда в центра страницы при разном разрешение? на css не могу придумать. может как то через js...

Сохранение пропорций при масштабировании страницы
Как сохранить пропорции всех блоков сайта при масштабировании страницы? Например как на сайте скайпа.


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru