Перейти к содержанию
Windakolit

Как сделать адаптивными картинки на сайте?

Рекомендуемые сообщения

Интересуют как азы, чтобы понять в целом, как это делается, так и примеры на практике. У себя на сайте заметил, что для одного типа материалов картинки адаптируются на мобильных, а на другом типе вытянуты по ширине как на десктопе

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Прошу прощения но вопрос не ясен - адаптивный шаблон натягивается на весь сайт - никто отдельно картинки адаптивными не делает.

Если что-то не так - значит криво адаптивный шаблон натянули.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
14 минут назад, suffix сказал:

Если что-то не так - значит криво адаптивный шаблон натянули.

значит скорее всего это мой случай. Сайт изначально когда сделали хромал на 4 лапы - грузился секунд по 10, много других огрехов было. Потом заметил косяки по адаптивности - частично их поправили, частично нет. По картинкам сам удивился почему так на других страницах вышло

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для картинок.

Вариант № 1 (резиновость) - задавать ширину или высоту в %. Тогда, если они встают в один ряд по горизонтали, будут уменьшаться в соответствии с шириной экрана.
Минус этого, непропорциональность самих картинок. Или вам придётся заранее всем картинкам задавать один и тот же размер или хотя бы пропорции.

Вариант № 2 (адаптивность) - использование @media в стилях. В данном случае вы можете контролировать размер картинки в зависимости от экрана и разрешения.

Вариант № 3 (Идеальный) - совмещать технологии. К примеру, изначально задавать максимальную ширину и процент ширины, но ограничивать, делая картинку фоном слоя, а слою задавая определённые пропорции. И показывая в слое не всю картинку, а минимум 70%. Соответственно задавая слою размерную градацию по разрешению экрана.  

Примерно так... :)

  • Повысить репутацию 3
  • Спасибо 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


О проекте

Web@district это проект, который объединил специалистов из разных областей сайтостроения и интернет-маркетинга для того, чтобы пользователи этого ресурса могли удовлетворять свои потребности в знаниях, находить исполнителей, заказчиков или просто приятно пообщаться.

info@webdistrict.pro

Тут может оказаться каждый из вас.:)

логотип в футрере

Copyright © Web@District 2018      При копировании материалов с сайта активная гиперссылка ссылка на источник обязательна
×