Skip to content

Latest commit

 

History

History
17 lines (14 loc) · 925 Bytes

readme.md

File metadata and controls

17 lines (14 loc) · 925 Bytes

Vue Responsive Image Helpers

This is just a simple vue plugin to make working with (responsive) images a bit easier.

Keep in mind that it is meant mostly for personal use, and it is at the moment tailored for Bulma's breakpoints and imgix API.

Usage

The plugin adds 3 simple utility functions to the Vue global scope which helps you create values for img src, srcset, and sizes attributes.

$createSrc(src, [options])

  • src: Base URL for the image
  • [options]: {width = 1600, fit = 'crop', heightRatio = .5625, suffix = ''}

$createSrcSet(src, [options])

  • src: Base URL for the image
  • [options]: {fit = 'crop', heightRatio = .5625, max = 1600, min = 100, increment = 100, suffix = ''}

$createSizes([options])

  • [options]: {desktop = '50vw', tablet = '75vw', mobile = '100vw'}

Sorry for the simple documentation. Then again it's mostly meant for personal use.