Карточка товара - выбор изображения в зависимости от ширины

@OljaLisova · Регистрация: 02.09.2019

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

Здравствуйте. Дано несколько вариантов макета в зависимости от ширины экрана / браузера. Для каждого из вариантов, у карточки товара свои параметры изображения (само изображение, размеры, соотношение сторон).
Как реализовать такой адаптив?

@NTHing · 23.10.2021, 22:58

Попробуйте через медиа-запросы.

@OljaLisova · 23.10.2021, 23:20 **[ТС]**

NTHing, размеры и соотношение сторон я реализую через медиа-запросы, но что делать с несколькими вариантами изображений? Должно работать в IE11.

@NTHing · 23.10.2021, 23:38

https://github.com/scottjehl/picturefill

@mr_dramm · 23.10.2021, 23:50

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

Для каждого из вариантов, у карточки товара свои параметры изображения (само изображение, размеры, соотношение сторон)

Привести к одному варианту это идеально. Сделать хотябы одинаковый фон тоже. Я так понял вам нужен слайдер для ie11, bootstrap заявляет о поддержке ie10, ну тащить конечно bs только ради слайдера не очень хорошая идея. Но я уверен что в интернете есть готовые решения для ie11. Еще есть такая вещь как полифилы вот например object-fit и object-position полифил для ie. Так теперь пришло время ленивых фантазий ну наверное есть сервисы которые обрежут обезображения (2021 живем во времена нейронных сетей и марсоходов) и сделают их одинакового размера.

@gogolik · 23.10.2021, 23:52

А тег picture не подойдет? Я так понял, что там разные изображения вообще будут использоваться в зависимости от брейкпоинта?

@mr_dramm · 23.10.2021, 23:55

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

А тег picture не подойдет?

Он же вроде в шу11 не поддерживается... Или поддерживается?

Добавлено через 1 минуту
Хотя уверен тоже полифил есть

@OljaLisova · 24.10.2021, 00:09 **[ТС]**

mr_dramm, слайдер не нужен. В зависимости от ширины экрана / браузера, в карточке товара отображается нужное изображение. За полифил, благодарю. Буду пробовать.

@gogolik · 24.10.2021, 08:39

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

Он же вроде в шу11 не поддерживается... Или поддерживается?

А, и правда. Мы просто давно отказались от поддержки IE. Ну, значит, менять изображение в зависимости от брейкпоинта с помощью js. Че ещё остаётся при таких запросах.

Новые блоги и статьи Все статьи Все блоги /
Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .

@OljaLisova 0 / 0 / 0 Регистрация: 02.09.2019 Сообщений: 6

	Карточка товара - выбор изображения в зависимости от ширины 23.10.2021, 22:54. Показов 811. Ответов 8 Метки нет (Все метки) Здравствуйте. Дано несколько вариантов макета в зависимости от ширины экрана / браузера. Для каждого из вариантов, у карточки товара свои параметры изображения (само изображение, размеры, соотношение сторон). Как реализовать такой адаптив? 0

@NTHing 1782 / 963 / 388 Регистрация: 26.11.2014 Сообщений: 1,966 Записей в блоге: 1
	23.10.2021, 22:58
	Попробуйте через медиа-запросы. 0

@OljaLisova 0 / 0 / 0 Регистрация: 02.09.2019 Сообщений: 6
	23.10.2021, 23:20 [ТС]
	NTHing, размеры и соотношение сторон я реализую через медиа-запросы, но что делать с несколькими вариантами изображений? Должно работать в IE11. 0

@NTHing 1782 / 963 / 388 Регистрация: 26.11.2014 Сообщений: 1,966 Записей в блоге: 1
	23.10.2021, 23:38
	https://github.com/scottjehl/picturefill 3

@gogolik Супер-модератор 3970 / 2092 / 832 Регистрация: 13.03.2010 Сообщений: 6,903
	23.10.2021, 23:52
	А тег picture не подойдет? Я так понял, что там разные изображения вообще будут использоваться в зависимости от брейкпоинта? 1

@OljaLisova 0 / 0 / 0 Регистрация: 02.09.2019 Сообщений: 6
	24.10.2021, 00:09 [ТС]
	mr_dramm, слайдер не нужен. В зависимости от ширины экрана / браузера, в карточке товара отображается нужное изображение. За полифил, благодарю. Буду пробовать. 0