Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.93/56: Рейтинг темы: голосов - 56, средняя оценка - 4.93
4 / 4 / 1
Регистрация: 28.03.2010
Сообщений: 125

Пропорциональное изменение размеров div (от родителя до всех вложенных)

28.06.2014, 12:47. Показов 10415. Ответов 5
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Есть такой код:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="dsk-l">
 <div id="dsk-l-brd"></div>
 <div id="dsk-l-stp"></div>
 <div id="dsk-l-trmz"></div>
 <div id="dsk-l-cntr"></div>
 <div id="dsk-l-bw" class="ld"></div>
 <div id="ld1" class="ld"></div>
 <div id="ld2" class="ld"></div>
 <div id="ld3" class="ld"></div>
 <div id="ld4" class="ld"></div>
 <div id="ld5" class="ld"></div>
 <div id="ld6" class="ld"></div>
 </div>
У каждого вложенного дива position: absolute со своими координатами (относительно Id="dsk-l"). Так же у многих применен "сложный" border-radius, и разные отступы.. То есть пересчитывать - мрак. Нельзя ли как то, пропорционально, родительским дивом уменьшить все размеры??
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
28.06.2014, 12:47
Ответы с готовыми решениями:

Изменение размеров родителя при изменении размеров дочерних
Есть панель, не закрепленная ничем типа align, а в этой панели идет чередование Объект(TGraphicControl) и Splitter. У Splitter-а...

Пропорциональное изменение размеров UserControl
Уважаемые гуру XAML, помогите, пожалуйста. Хочу создать элемент, который при помещении его в родительский контейнер растягивался бы до...

Пропорциональное изменение размеров сайта
Здравствуйте. Имеется следующая задача: Подогнать сайт под всевозможные разрешения. HTML страница&lt;link rel=&quot;stylesheet&quot;...

5
 Аватар для sashok89
75 / 75 / 11
Регистрация: 04.08.2012
Сообщений: 526
Записей в блоге: 2
28.06.2014, 17:18
Цитата Сообщение от pitstop Посмотреть сообщение
Нельзя ли как то, пропорционально, родительским дивом уменьшить все размеры??
Вам просто нужно задать эти размеры в процентах, тогда при уменьшении они будет изменять пропорционально относительно родителя
1
4 / 4 / 1
Регистрация: 28.03.2010
Сообщений: 125
28.06.2014, 19:04  [ТС]
нужно задать эти размеры в процентах
Нет. Не подходит, позиционирование блоков необходимо точное (до пикселя), а на процентах такого не сваяяешь. Может быть с помощью какого либо js?
0
 Аватар для killlfun
102 / 102 / 39
Регистрация: 25.02.2014
Сообщений: 321
28.06.2014, 19:26
pitstop, как раз таки можно с помощью процентов сделать точно позиционирование, это резиновая верстка.
к примеру, проценты же можно записывать например и так, для большей точности:

CSS
1
2
3
4
.div {
width: 62,962963%; /* 170px / 270px = 0.62962963 */
float: left;
}
То есть блок в ширину 170px будет занимать 62,962963% места в блоке в ширину 270px
Все довольно точно.

По-другому никак.
1
4 / 4 / 1
Регистрация: 28.03.2010
Сообщений: 125
28.06.2014, 20:19  [ТС]
Ок. Но вопрос состоит в том как пересчитать... верстка уже есть и фиксирована наглухо. Ширина.высота еще не проблема, а вот радиусы и бордеры по окружности.. Это приводит в ужас. Что пиксели, что проценты - разницы нет. А браузер при масштабировании что делает? Пересчитывает?
0
 Аватар для killlfun
102 / 102 / 39
Регистрация: 25.02.2014
Сообщений: 321
28.06.2014, 20:57
pitstop, в процентах нужно переписать только размеры блоков и отступов.
Все остальное остается же в пикселях.
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
28.06.2014, 20:57
Помогаю со студенческими работами здесь

Пропорциональное изменение размеров изображений
подскажите как сделать чтобы картинки самых разных размеров отображались корректно в блоке допустим 150 на 150? делаю так &lt;?php ...

Пропорциональное изменение размеров формы
Как можно заставить форму растягиваться так, чтобы она всегда оставалась квадратной? Пробовал менять размеры в Resize/ResizeEnd, но...

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

Пропорциональное изменение размеров формы delphi
Ребят помогите. Нужно сделать пропорциональное изминение розмеров формы...если я начиною изминять розмер формы то оно должно его...

Пропорциональное изменение размеров внутри формы
Как изменять размеры,положение компонентов внутри главной формы в зависемости от её размеров


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

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Новые блоги и статьи
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI
Eddy_Em 18.02.2026
Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .
Символьное дифференцирование
igorrr37 13.02.2026
/ * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image
8Observer8 10.02.2026
Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru