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

изменение размера элемента - при сдвиге

16.02.2016, 17:20. Показов 2431. Ответов 5
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
HTML5
1
<div class="logo"></div>
CSS
1
2
3
4
5
6
7
.logo {
background-image: url("logoshadow.png");
background-repeat:  no-repeat;
height: 136px;
width: 136px;
background-size: contain;
}
есть элемент логотипа в фиксированном меню, коды выше.
нужно, чтобы при сдвиге меню с изначальной позиции, лого уменьшалось, к примеру до 90х90 пикс, а остальные элементы меню сдвигались к нему.
и все это очень хочется в рамках css реализовать.

гугол не спас. помогите плз
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
16.02.2016, 17:20
Ответы с готовыми решениями:

Изменение размера картинки при увеличении размера экрана
Добрый день. Как можно сделать следующее: Имеется картинка большого размера, при заходе с малым разрешением экрана (телефон) картинка...

Изменение размера UserControl при изменении размера элемента на нем
Здравствуйте. У меня на UserControl находится TextBox. Выполняю построение. В конструкторе переношу мой UserControl на форму. Меняю в...

Qml изменение размера Canvas при изменении размера окна
Может есть какой нибудь способ, чтобы при изменении размера окна (в моем случае window) изменялся размер рисунка Canvas (увеличивался или...

5
 Аватар для ArtSmm
32 / 32 / 2
Регистрация: 07.01.2016
Сообщений: 487
16.02.2016, 17:45
В моем понимании, тут а. либо задавать width:100% у лого и height:auto, либо б.рисовать два отдельных логотипа, которые будут отображаться соответственно под разные разрешения экрана
Те в первом случае лого уменьшается за счет уменьшения размеров блока, в котором оно находится
0
0 / 0 / 1
Регистрация: 03.12.2011
Сообщений: 136
16.02.2016, 19:24  [ТС]
Цитата Сообщение от ArtSmm Посмотреть сообщение
В моем понимании, тут а. либо задавать width:100% у лого и height:auto, либо б.рисовать два отдельных логотипа, которые будут отображаться соответственно под разные разрешения экрана
Те в первом случае лого уменьшается за счет уменьшения размеров блока, в котором оно находится
как само условия то задать? смены чего-либо при сдвиге меню
0
 Аватар для ArtSmm
32 / 32 / 2
Регистрация: 07.01.2016
Сообщений: 487
16.02.2016, 20:00
Смена чего-либо и сдвиг это свойство transition, у которого задается задержка. Transition: all 0s ease 0s; вместо 0 ваше время секундах
0
 Аватар для evikza
968 / 530 / 244
Регистрация: 20.05.2015
Сообщений: 776
16.02.2016, 20:18
L13K, я если честно мало чего понял, нужно при уменьшении разрешения экрана - изменить размер лого и смещать к нему меню? Воспользуйтесь @media

Например при окне в 768px, применяются другие стили к блоку.

CSS
1
2
3
4
5
6
@media only screen and (max-width: 768px) {
  .logo {
    height: 90px;
    width: 90px;
  }
}
Вот пример: http://codepen.io/evikza/pen/OMqKyJ
0
0 / 0 / 1
Регистрация: 03.12.2011
Сообщений: 136
16.02.2016, 21:50  [ТС]
Цитата Сообщение от evikza Посмотреть сообщение
L13K, я если честно мало чего понял, нужно при уменьшении разрешения экрана - изменить размер лого и смещать к нему меню? Воспользуйтесь @media
при прокрутке экрана вниз, а не уменьшении размера
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
16.02.2016, 21:50
Помогаю со студенческими работами здесь

Изменение размера обьектов при изменении размера графического окна
Можно ли в pascalABC.net сделать следующее: чтобы приизменении размера графического окна изменялись и размеры обьектов.Зарание спасибо:-|

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

Изменение размера верхней навигации при изменении размера
Нужно сделать так чтобы при прокрутке страницы вниз меню уменьшалось а при прокрутке к верху меню снова становилось своих размеров внизу...

Изменение размера элемента
Всем доброго времени суток! Есть такая проблема, на форме лежит tabControl и в него вложен treeView, так вот дело в том что при запуске...

Изменение размера элемента
Здравствуйте! Вот добавил я элемент datepicker &lt;div id=&quot;datepicker&quot;&gt;&lt;/div&gt; &lt;script&gt; $(function () { ...


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

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Новые блоги и статьи
Модель микоризы: классовый агентный подход
anaschu 02.01.2026
Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути
Programma_Boinc 01.01.2026
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост.
Programma_Boinc 28.12.2025
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / **********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / **********/ gallery/ bKBkQFf Пост отсюда. . .
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США.
Programma_Boinc 26.12.2025
Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка.
Programma_Boinc 23.12.2025
Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru