Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.67/9: Рейтинг темы: голосов - 9, средняя оценка - 4.67
 Аватар для Black_Star
23 / 22 / 17
Регистрация: 06.05.2016
Сообщений: 260

Bootstrap Подмена изображений при уменьшении экрана

28.02.2017, 12:27. Показов 1818. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Добрый день уважаемые. Подскажите пожалуйста, как реализовать при использовании бутстрапа "подмену" изображений на болие мелкие, при уменьшении экрана меньше 750рх?
Если можно то на этом примере https://jsfiddle.net/tL3kq7ez/1/
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
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="row">
        <div class="col-md-6">
          <img src="http://placehold.it/485x326" alt="1">
          <img src="http://placehold.it/485x326" alt="1">
          <img src="http://placehold.it/485x326" alt="1">
          <img src="http://placehold.it/485x326" alt="1">
        </div>
        <div class="col-md-6">
          <img src="http://placehold.it/485x326" alt="2">
          <img src="http://placehold.it/485x326" alt="2">
          <img src="http://placehold.it/485x326" alt="2">
          <img src="http://placehold.it/485x326" alt="2">
        </div>
        <div class="col-md-6">
          <img src="http://placehold.it/485x326" alt="3">
          <img src="http://placehold.it/485x326" alt="3">
          <img src="http://placehold.it/485x326" alt="3">
          <img src="http://placehold.it/485x326" alt="3">
        </div>
        <div class="col-md-6">
          <img src="http://placehold.it/485x326" alt="4">
          <img src="http://placehold.it/485x326" alt="4">
          <img src="http://placehold.it/485x326" alt="4">
          <img src="http://placehold.it/485x326" alt="4">
        </div>
      </div>
    </div>
  </div>
</div>
CSS
1
2
3
4
5
6
img {
  max-width: 100%;
  height: auto;
  
  border: 1px solid #000;
}
Допустим, при экране <750px мне необходимо два столбца с изображениями 375х163
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
28.02.2017, 12:27
Ответы с готовыми решениями:

При уменьшении размера экрана, таблица теряется за меню (bootstrap)
Здравствуйте, помогите пожалуйста. Разбираюсь с bootstrap, хочу написать адаптивный сайт, сверху идет менюшка, прямо под ней таблица. При...

В Bootstrap не нажимаются ссылки при уменьшении окна браузера (экрана устройства)
Тестовый домен рабочего сайта: belakb.ru Я поменял дизайн сайта из одноколоночного представления товаров в КАТЕГОРИЯХ - в...

Вёрстка увеличение изображений при уменьшении экрана
Здравствуйте. Как сделать средствами HTML, CSS чтобы изображения увеличивались при уменьшении экрана, предпологается что они будут...

2
112 / 108 / 42
Регистрация: 22.01.2017
Сообщений: 452
28.02.2017, 12:30
srcset в помощь
1
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
28.02.2017, 13:15
Can I Use: srcset

Есть вариант при помощи response.js.
Вложения
Тип файла: rar resp.rar (45.0 Кб, 2 просмотров)
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
28.02.2017, 13:15
Помогаю со студенческими работами здесь

При уменьшении экрана браузера блок уходит за левый край экрана
left 50% и margin-left:-width/2 при уменьшении экрана браузера уходит за левый край экрана. как этого избежать?

Сдвиг <div> при уменьшении размеров окна, bootstrap
Доброй ночи - начал осваивать Bootstrap и на примере одного шаблона начал изучать его. Попробовал что-то типо списка сделать. Меню сбоку...

Уменьшение изображений при уменьшении окна бразуера
Здравствуйте. Скажите, существует ли какой-нибудь скрипт, или же как можно осуществить уменьшение изображений на сайте, при уменьшении окна...

Адаптивное меню при уменьшении экрана
Подскажите, пожалуйста. Данное горизонтальное меню при уменьшении экрана становится вертикальным. Как сделать чтоб по нажатию на один из...

При уменьшении экрана ползет разметка
Есть &lt;div&gt; с контентом и при уменьшении размеров экрана контент вылазит на границу &lt;div&gt; Как лечить подобную проблему? overflow:...


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

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
Воспроизведение звукового файла с помощью 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
Решили писать научную статью с неким РОманом
http://iceja.net/ математические сервисы
iceja 20.01.2026
Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru