[Перевод] Отзывчивые изображения на практике (Часть 3)

Скрипты и советы | 4 декабря 2014 3 384

Уроки CSS на Хабрахабре

Последняя часть истории об отзывчивых изображениях, которую мы начали здесь и продолжили тут, рассказывая о применении srcset и sizes. Сегодня речь пойдет об использовании тега для обертывания изображений. Вторая стадия: picture и режиссура
srcset для ленивых, picture для безумных™ Мэт Маркес
Итак, для изображений, которые просто нужно масштабировать, мы приводим список наших исходников и их ширину в пикселях в srcset, позволяем браузеру выбирать, какая ширина изображения будет отображаться с помощью sizes, и отпускаем наше безумное желание все контролировать. Но! Иногда нам захочется адаптировать наши изображения, выходя за рамки масштабирования. В таком случае, нам нужно вернуть небольшую часть контроля над подбором исходников. Вводим picture. Читать дальше →

 Источник: Уроки CSS на Хабрахабре
[Из песочницы] Что поправить в верстке перед выпуском в продакшн?

Это статья — чек-лист того, что нужно не забыть поправить в любом проекте. Список полезных мелочей. Весь текст поделен...

Подробнее
Яндекс не индексирует изображения с сайтов под https

Я бы хотел просто оставить тут небезызвестную картинку с .jpg на конце. Я не мог этого предполагать, когда принимал...

Подробнее
Размеры растровых изображений: пиксели, DPI, PPI, сантиметры — вы ничего не путаете?

Приветствую уважаемое сообщество Хабра! Пишу эту небольшую заметку как важный ликбез для всех, кто работает с...

Подробнее
[Перевод] Создание адаптивных изображений

В Интернете найдется немало статей, посвященных адаптивным логотипам. Наиболее популярным примером является сайт...

Подробнее
Блог им. mancocapac / Перевод Создание чистого CSS-шаблона для Joomla 1.5 — часть 2.1

Продолжаю перевод цикла статей из блога Compass Designs о создании шаблона для Joomla 1.5, выполненного по современным...

Подробнее
Жизнь фронтендера в Spotify

Изображения — это, как правило, самая «тяжелая» статика в вебе. Многие фронтендеры знают об адаптивных изображениях,...

Подробнее

💬 Комментарии

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms/

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями

Ёлочка