Приветствую Друзья! Сегодня хочу рассказать о полезном инструменте которым я всегда пользуюсь при вёрстке.
При вёрстке сайта (макета), поиск изображений занимает время и отвлекает.
Поэтому рекомендую использовать инструмент - заполнитель изображений placehold, один из пользуемых мною инструментов который помогает значительно экономить время в процессе вёрстки.
Заполнитель картинок
Применение заполнителей изображений стало очень популярно из за того что это быстро и очень удобно. В месте где должна быть вставлена картинка, мы вставляем заполнитель не отвлекаясь на поиск картинки. При этом можно легко задать размер картинки-заполнителя и даже написать текст на этом изображении.
Работает он следующим образом - в нужном месте вместо картинки вставляем код:
<img src="https://placehold.it/350x150">
который выводит вот такую картинку размером 350×150px:
при этом сам размер изображения будет указан на картинке.
Размер заполнителя
Размер можно изменять на абсолютно любой. Для этого просто меняем цифровое значение.
Например:
<img src="https://placehold.it/250x200">
выводит картинку размером 250px × 200px
Округлённые значения брать не принципиально. Можно брать любые размеры, например: 1099×768, 344×177, 99×546 и т.п.
Текст на картинке
По умолчанию на картинке-заполнителе будет отображён её размер в пикселах. Но если нужно как то обозначить картинку текстом, то он легко добавляется.
Для этого добавляем ?text= и текст который будет выводиться на картинке.
Например:
<img src="https://placehold.it/450x150?text=Картинка с текстом">
Получим вот такое изображение:
Сниппет
Для удобства применения заполнителя картинок, я у себя в редакторе VS Code создал сниппет с названием imgpl который открывает код
<img src="https://placehold.it/250x200?text=Картинка" alt="">
Ранее я уже писал о том, как создать свой собственный сниппет в редакторе Sublime Text и как создать сниппет в VSCode.
Надеюсь вы тоже увидете в этом полезный для себя инструмент и будете его использовать в своей работе.
