[Перевод] Отзывчивые изображения на практике (Часть 3)
srcset для ленивых, picture для безумных™ Мэт МаркесИтак, для изображений, которые просто нужно масштабировать, мы приводим список наших исходников и их ширину в пикселях в srcset, позволяем браузеру выбирать, какая ширина изображения будет отображаться с помощью sizes, и отпускаем наше безумное желание все контролировать. Но! Иногда нам захочется адаптировать наши изображения, выходя за рамки масштабирования. В таком случае, нам нужно вернуть небольшую часть контроля над подбором исходников. Вводим picture.
Источник:
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.
Похожие публикации
[Перевод] Создание адаптивных изображений
В Интернете найдется немало статей, посвященных адаптивным логотипам. Наиболее популярным примером является сайт Responsive Logos, который показывает различные варианты известных логотипов для разных... читать далее
Жизнь фронтендера в Spotify
Изображения — это, как правило, самая «тяжелая» статика в вебе. Многие фронтендеры знают об адаптивных изображениях, которые позволяют использовать определённые изображения для разных разрешений. Но... читать далее
Размеры растровых изображений: пиксели, DPI, PPI, сантиметры — вы ничего не путаете?
Приветствую уважаемое сообщество Хабра! Пишу эту небольшую заметку как важный ликбез для всех, кто работает с растровыми картинками. Обычно, вопрос в чём измерять изображения встаёт у новичков, но... читать далее
[Из песочницы] Что поправить в верстке перед выпуском в продакшн?
Это статья — чек-лист того, что нужно не забыть поправить в любом проекте. Список полезных мелочей. Весь текст поделен на две части. Первая — про простые элементы страницы, такие как текст, кнопки,... читать далее
Яндекс не индексирует изображения с сайтов под https
Я бы хотел просто оставить тут небезызвестную картинку с .jpg на конце. Я не мог этого предполагать, когда принимал решение запустить сайт под Extended Validation SSL. Я не мог предполагать, что... читать далее
Блог им. mancocapac / Перевод Создание чистого CSS-шаблона для Joomla 1.5 — часть 2.1
Продолжаю перевод цикла статей из блога Compass Designs о создании шаблона для Joomla 1.5, выполненного по современным веб-стандартам. Это вторая часть цикла. Первую часть можно прочитать здесь:... читать далее
Прокомментировать
Облако тегов
API CSS dle habrahabr.ru HTML JavaScript ReactJS seo SEO на Хабрахабре trademod Блог компании PromoPult Блог компании Конференции Олега Бунина (Онтико) Веб-дизайн Интернет-маркетинг Поисковая оптимизация Поисковые технологии Программирование Разработка веб-сайтов Уроки CSS на Хабрахабре Учебный процесс в IT Я пиарюсь автомобильный сайт блог верстка интернет-магазин информационный ресурс корпоративный сайт модуль мы рекомендуем портфолио разработка сайтов редизайн сайт-визитка скрипты снег на сайте советы уроки хаки шаблон
Реклама на сайте