Inter-Net.PRO

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

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

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

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

 

Получим вот такое изображение:

картинка с текстом


Сниппет

  Для удобства применения заполнителя картинок, я у себя в редакторе Sublime Text создал сниппет с названием imgpl который открывает код

<img src="https://placehold.it/250x200?text=Картинка" alt="">

 

 Ранее я уже писал о том, как создать свой собственный сниппет в редакторе Sublime Text.

 


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

Добавить комментарий

Комментарии добавленные анонимно добавляются только после модерации, из-за большого количества спама.

Защитный код
Обновить

Авторизация

Войти через соцсети: