Адаптивная верстка

@kpavel1990 · Регистрация: 18.01.2015

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

Ребят, подскажите, как сделать адаптивной картинку в background? Делать несколько картинок под контрольные точки экрана или есть более простой способ. Не могу ничего найти в интернете про это...

@Ascolon · 12.03.2016, 22:03

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@media only screen and (max-width : 1200px) {
    
}
s/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
    
    
}
 
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    
    
}
 
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
    
}

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

@Fedor92 · 12.03.2016, 22:07

kpavel1990, попробуйте либо свойство background-size:cover - либо background-size:100% 100%... Обычно помогает...

@kpavel1990 · 13.03.2016, 12:40 **[ТС]**

Fedor92, может подскажешь, как лучше делать, сжимать таким способом как ты показал или по медиазапросу для каждого размера экрана менять картинку на картинку меньшего размера? Так наверное будет быстрее загружаться, например, на мобильных или планшетах

@Fedor92 · 13.03.2016, 12:55

Сообщение от kpavel1990

Fedor92, может подскажешь, как лучше делать, сжимать таким способом как ты показал или по медиазапросу для каждого размера экрана менять картинку на картинку меньшего размера?

Оба способа в принципе равносильны... Всё зависит в первую очередь от веса фоновой картинки... Если она имеет значительный вес, то рациональнее сделать медиазапросом, а если вес картинки незначительно отличается от уменьшенного варианта, то проще сделать стилем... А ещё лучше потестить скорость загрузки сайта...

@kpavel1990 · 13.03.2016, 13:45 **[ТС]**

Для мобильных думаю в любом случае нужно будет менять все картинки и бэкграунды. В общем понятно. А что посоветуете почитать или посмотреть по адаптивной верстке?

@Fedor92 · 13.03.2016, 13:54

Сообщение от kpavel1990

А что посоветуете почитать или посмотреть по адаптивной верстке?

А как Вы её собрались реализовывать? Есть фреймворки, есть медиазапросы, есть тот же самый вьюпорт...

Читать рекомендую исключительно официальные мануалы(к фреймворкам), инфу по медиазапросам и вьюпорту на сайте w3c - всё остальное от лукавого... Можно, как доп. материал видеоуроки посмотреть, но только после изучения мануалов, чтобы было понимание процесса...

@kpavel1990 · 13.03.2016, 14:05 **[ТС]**

Медиазапросами. С фреймоворками не буду связываться, т.к. очень важна скорость загрузки. А на русском языке есть мануалы?

@Fedor92 · 13.03.2016, 14:16

Сообщение от kpavel1990

А на русском языке есть мануалы?

Вот к примеру, но буржуйские лучше в плане информативности...

@kpavel1990 · 13.03.2016, 15:40 **[ТС]**

Сейчас вот возник еще вопрос, может подскажете) В общем, можно ли поменять картинку, которая подключена в html через тег img, с помощью медиазапроса?

@Fedor92 · 13.03.2016, 15:41

Сообщение от kpavel1990

В общем, можно ли поменять картинку, которая подключена в html через тег img, с помощью медиазапроса?

Картинку нет - фон можно...

В остальном гугель в помощь...

Новые блоги и статьи Все статьи Все блоги /
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(), которая. . .

Адаптивная верстка

Решение

Решение

@kpavel1990 1 / 1 / 0 Регистрация: 18.01.2015 Сообщений: 74

	Адаптивная верстка 12.03.2016, 21:05. Показов 1269. Ответов 10 Метки нет (Все метки) Ребят, подскажите, как сделать адаптивной картинку в background? Делать несколько картинок под контрольные точки экрана или есть более простой способ. Не могу ничего найти в интернете про это... 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	12.03.2016, 22:07
	Сообщение было отмечено kpavel1990 как решение Решение kpavel1990, попробуйте либо свойство background-size:cover - либо background-size:100% 100%... Обычно помогает... 1

@kpavel1990 1 / 1 / 0 Регистрация: 18.01.2015 Сообщений: 74
	13.03.2016, 12:40 [ТС]
	Fedor92, может подскажешь, как лучше делать, сжимать таким способом как ты показал или по медиазапросу для каждого размера экрана менять картинку на картинку меньшего размера? Так наверное будет быстрее загружаться, например, на мобильных или планшетах 0

@kpavel1990 1 / 1 / 0 Регистрация: 18.01.2015 Сообщений: 74
	13.03.2016, 13:45 [ТС]
	Для мобильных думаю в любом случае нужно будет менять все картинки и бэкграунды. В общем понятно. А что посоветуете почитать или посмотреть по адаптивной верстке? 0

@kpavel1990 1 / 1 / 0 Регистрация: 18.01.2015 Сообщений: 74
	13.03.2016, 14:05 [ТС]
	Медиазапросами. С фреймоворками не буду связываться, т.к. очень важна скорость загрузки. А на русском языке есть мануалы? 0

@kpavel1990 1 / 1 / 0 Регистрация: 18.01.2015 Сообщений: 74
	13.03.2016, 15:40 [ТС]
	Сейчас вот возник еще вопрос, может подскажете) В общем, можно ли поменять картинку, которая подключена в html через тег img, с помощью медиазапроса? 0