Заменитель картинок

Заменитель изображений - это удобный инструмент для быстрой вёрстки сайтов. Вставьте быстро заполнитель изображения, чтобы не терять время при вёрстке.

заполнитель изображения

  Приветствую Друзья! Сегодня хочу рассказать о полезном инструменте которым я всегда пользуюсь при вёрстке.

  При вёрстке сайта (макета), поиск изображений занимает время и отвлекает.

  Поэтому рекомендую использовать инструмент - заполнитель изображений 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.

 


  Надеюсь вы тоже увидете в этом полезный для себя инструмент и будете его использовать в своей работе.

 

 

 

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

*** чтобы писать комментарии.