ресайз фоновых изображений

@bander313 · Регистрация: 18.04.2013

Студворк — интернет-сервис помощи студентам

здравствуйте товарищи! есть вопрос над которым неделю мучаюсь:
есть несколько фоновых изображений которые очень нужно изменить относительно разрешения экрана, тоже самое с кнопками сделать, и при этом не испортить общей картинки сайта. то есть ничего не должно расползаться, убегать и т.п.
если подробно то примерно так вот выглядит на мониторе с 21 диагонлью
https://www.cyberforum.ru/atta... 1402754256

а вот так с диагональю 17:
https://www.cyberforum.ru/atta... 1402754256

подскажите как можно побороть эту фигню, если подскажите где чего почитать на этот счет буду весьма признателен.

вот код css

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
/* блок с кнопками в голове сайта (находится во втором уровне) */
#battons_head2 {
    position: relative;
    float: bottom;
    margin: 0 0 0 15%;
}
#battons_head2 input {
    font-size: 18px;
}
/* кнопка заказа звонка */
#order_call {
    background-color: #c8561e;
    border: 0px;
    color: #ffffff;
    float: left;
    margin: 0 0 0 0;
}
 
/* кнопка оставления заявки */
#Submit_a_request {
    background-color: #2f3239;
    border: 0px;
    color: #ffffff;
    float: left;
    margin: 0 0 0 4%;
}
/*тело сайта*/
#body {
    position: relative;
    margin-top: 10px; 
    height: auto;    
}
/*кнопки в теле сайта*/
#battons_blck {
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    width: 75%;
}
#battons_blck_line1 {
    margin-bottom: 3%;
    height: 125px;
    display: inline;
}
#battons_blck_line1 span {
    margin: 0 7.5% 0 7.5%;
}
#battons_blck_line1_media_pr {
    margin: 0 7.5% 0 7.5%;
}
#battons_blck_line2 {
    margin-bottom: 3%;
}
#battons_blck_line2 span {
    
}
#battons_blck_line2_regional_and_thematic_advertising {
    margin-left: 25%;
}
#battons_blck_line2_PR_company {
    float: right;
    margin-right: 25%
}
#battons_blck_line3 {
    height: 125px;
    margin-bottom: 5%;
    display: inline;
}
#battons_blck_line3 span {
    margin-left: 7.5%;
    margin-right: 7.5%;
}
#battons_blck_line3_enet_marceting {
 
}

а вот код html

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
           <div><!-- тут место для вторй части головы сайта -->
                    <div id="head2">
                        <!--<div id="head2_coubs"></div>-->
                            <div id="header_text">
                                
                            </div>
                            <div id="battons_head2">
                                <span><form><input id="order_call" type="submit" value="заказать звонок" name="order call" /></form></span>
                                <span><form><input id="Submit_a_request" type="submit" value="оставить заявку" name="submit a request" /></form></span>
                            </div>
                        
                    </div>   
                </div>
                
            </div>
            <div id="body">
                <div id="battons_blck"> 
                    <div id="battons_blck_line1"
                        <span><a href="" id="battons_blck_line1_media_pr"> <img src="img/медийная_реклама.png" width="115" height="115" alt="медийная_реклама"/></a></span>
                        <span><a href=""> <img src="img/конекстная_реклама.png" width="115" height="115" alt="конекстная_реклама"/></a></span>
                        <span><a href=""> <img src="img/реклама_в_соц.сетях.png" width="115" height="115" alt="реклама_в_соц.сетях"/></a></span>
                        <span><a href=""> <img src="img/реклама_в_мобильных_приложениях.png" width="115" height="115" alt="реклама_в_мобильных_приложениях"/></a></span>
                    </div>
                    <div id="battons_blck_line2">
                        <span><a href="" id="battons_blck_line2_regional_and_thematic_advertising"> <img src="img/региональная_и_театическая_реклама.png" width="115" height="115" alt="региональная_и_театическая_реклама"/></a></span>
                        <span><a href="" id="battons_blck_line2_PR_company"> <img src="img/PR_компаний_в_интернете.png" width="115" height="115" alt="PR_компаний_в_интернете"/></a></span>
 
                    </div>
                    <div id="battons_blck_line3">
                        <span><a href="" id="battons_blck_line3_enet_marceting"> <img src="img/комплексный_интернет_маркетинг.png" width="115" height="115" alt="комплексный_интернет_маркетинг"/></a></span>
                        <span><a href=""> <img src="img/не_стандартные_решения.png" width="115" height="115" alt="не_стандартные_решения"/></a></span>
                        <span><a href=""> <img src="img/разработка_сайтов.png" width="115" height="115" alt="разработка_сайтов"/></a></span>
                        <span><a href=""> <img src="img/seo.png" width="115" height="115" alt="seo"/></a></span>
                    </div>
                
                </div>
                
            </div>

@bander313 · 14.06.2014, 18:09 **[ТС]**

если интересно посмотреть в живую то вот ссылка :
http://lightmediagroup.ru/

админ сори, забыл добавить к вы написанному сообщению

@Lovrentiy · 14.06.2014, 20:39

А как должно быть?

@bander313 · 14.06.2014, 20:44 **[ТС]**

примерно так: https://www.cyberforum.ru/atta... 1402764282

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

@Lovrentiy · 14.06.2014, 20:52

Используй медиа-запросы .

Можешь подогнать свой макет под несколько основных разрешений (1000-1024,1280-1336,1920 и т.д.)

Добавлено через 3 минуты
Есть ещё вариант, сделать готовый макет для "наименьшего" разрешения из категории тех клиентов, на которых ты нацелен.

Например не так давно эталонном "для всех подходящего разрешения" было 1000-1024px, в него входили планшеты, нетбуки и прочая лабуда. На сегодняшний день всё больше отходят на 1280px (во всяком случае я отошел), ну а как альтернатива - подготавливать резиновый сайт или адаптивный дизайн

@bander313 · 14.06.2014, 21:45 **[ТС]**

не подскажеш где чего можно почитать на счет резиновых макетов??

@Lovrentiy · 14.06.2014, 21:53

Как вариант - там после текста ссылки на варианты фиксированного и резинового макета. Но я бы посоветовал копать в сторону адаптивной верстки.
А в остальном почитай за макеты.

@bander313 · 14.06.2014, 21:55 **[ТС]**

спасибо большое!!!

@Taatshi · 15.06.2014, 10:13

bander313, у Вас правильный принцип - почти. Отступы в процентах. Нужно еще ширину картинки в процентах сделать. И не нужны никакие запросы.

И это... у Вас там ошибка в коде. Проверьте теги - див не закрыт и спан вроде.

@bander313 · 15.06.2014, 12:06 **[ТС]**

спасибо проверю!

Добавлено через 10 минут
действительно ошибка была. сейчас стало лучше!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

ресайз фоновых изображений

Решение

Решение

@bander313 1 / 1 / 2 Регистрация: 18.04.2013 Сообщений: 69
	14.06.2014, 18:09 [ТС]
	если интересно посмотреть в живую то вот ссылка : http://lightmediagroup.ru/ админ сори, забыл добавить к вы написанному сообщению 0

@Lovrentiy 162 / 162 / 11 Регистрация: 07.09.2011 Сообщений: 995
	14.06.2014, 20:39
	А как должно быть? 0

@bander313 1 / 1 / 2 Регистрация: 18.04.2013 Сообщений: 69
	14.06.2014, 20:44 [ТС]
	примерно так: https://www.cyberforum.ru/atta... 1402764282 и так должно выглядеть на мониторах с любым разрешением ну или примерно так. Миниатюры 0

@Lovrentiy 162 / 162 / 11 Регистрация: 07.09.2011 Сообщений: 995
	14.06.2014, 20:52
	Используй медиа-запросы . Можешь подогнать свой макет под несколько основных разрешений (1000-1024,1280-1336,1920 и т.д.) Добавлено через 3 минуты Есть ещё вариант, сделать готовый макет для "наименьшего" разрешения из категории тех клиентов, на которых ты нацелен. Например не так давно эталонном "для всех подходящего разрешения" было 1000-1024px, в него входили планшеты, нетбуки и прочая лабуда. На сегодняшний день всё больше отходят на 1280px (во всяком случае я отошел), ну а как альтернатива - подготавливать резиновый сайт или адаптивный дизайн 1

@bander313 1 / 1 / 2 Регистрация: 18.04.2013 Сообщений: 69
	14.06.2014, 21:45 [ТС]
	не подскажеш где чего можно почитать на счет резиновых макетов?? 0

@Lovrentiy 162 / 162 / 11 Регистрация: 07.09.2011 Сообщений: 995
	14.06.2014, 21:53
	Сообщение было отмечено bander313 как решение Решение Как вариант - там после текста ссылки на варианты фиксированного и резинового макета. Но я бы посоветовал копать в сторону адаптивной верстки. А в остальном почитай за макеты. 1

@bander313 1 / 1 / 2 Регистрация: 18.04.2013 Сообщений: 69
	14.06.2014, 21:55 [ТС]
	спасибо большое!!! 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	15.06.2014, 10:13
	Сообщение было отмечено bander313 как решение Решение bander313, у Вас правильный принцип - почти. Отступы в процентах. Нужно еще ширину картинки в процентах сделать. И не нужны никакие запросы. И это... у Вас там ошибка в коде. Проверьте теги - див не закрыт и спан вроде. 1

@bander313 1 / 1 / 2 Регистрация: 18.04.2013 Сообщений: 69
	15.06.2014, 12:06 [ТС]
	спасибо проверю! Добавлено через 10 минут действительно ошибка была. сейчас стало лучше! 0