https://github.com/sunnysideup/stretched-bg-image

adds a stretched (filling) BG image to any html element where you add the "stretched-bg-image" class
https://github.com/sunnysideup/stretched-bg-image

Last synced: 23 days ago
JSON representation

adds a stretched (filling) BG image to any html element where you add the "stretched-bg-image" class

• Host: GitHub
• URL: https://github.com/sunnysideup/stretched-bg-image
• Owner: sunnysideup
• License: mit
• Created: 2021-01-13T20:39:19.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2021-08-20T09:45:38.000Z (over 3 years ago)
• Last Synced: 2024-11-25T07:38:48.133Z (about 1 month ago)
• Language: HTML
• Size: 11.5 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Stretched Background Images

NPM package - adds a stretched (filling) BG image to any html element where you add the "stretched-bg-image" class.

# credits

For examples images in demo, see demo.  Idea and design for squiggly images is by [Niels from Guts](https://guts.co.nz)

# Also See

- [NPM Listing](https://www.npmjs.com/package/@sunnysideup/stretched-bg-image)

- [Demo](https://sunnysideup.github.io/stretched-bg-image/demo/index.html)

# Installation // new-school

Install via npm:

```shell

npm i @sunnysideup/stretched-bg-image

```    

Add the following code to your js file:

```js

import StretchedBgImages from 'stretched-bg-images'

```

And, add the following code to your scss file:

```scss

import "StretchedBgImages";

```

# Installation // old-school

Add the following code to your html:

```html

...

  // add script here!

```

# Applying it to your page ...

To apply it to any element, use the stretched-bg-images class, like this:

```html



  ...



```


# Running it

Add the following JS (old and new school):

```js

StretchedBgImages.apply()

```

Or with all options defined:

```js

const options = {

queryString: '.stretched-bg-images, ul',

errorClass: 'ratio-is-off-the-charts',

classRanges = [

  {

    max: '8',

    min: '2',

    className: 'panorama'

  },

  {

    max: '2',

    min: '1',

    className: 'landscape'

  },

  {

    max: '1',

    min: '0.5',

    className: 'portrait'

  },

  {

    max: '0.5',

    min: '0.125',

    className: 'skyscraper'

  }

]

}

StretchedBgImages.apply(options)

```

# Options

 - Above you are seeing the default values, you can set them as you see fit.

 - `max` and `min` refer the maximum and minimum aspect ratio defined as width divided by height

  (i.e. 8 means that the width is four times greater than the height of the containing box.)

 - `queryString` can be anything that works with: `document.querySelectorAll`.

 - `errorClass` is the class that is added when the ratio of the element is outside the described scopes in `classRanges`.

# Using SVGs

If you are using SVGs then you need to remove width and height

attributes from SVG and add preserveAspectRatio="none".

Like this:

```svg

...

```

You can use [https://yoksel.github.io/url-encoder/](https://yoksel.github.io/url-encoder/) to convert SVGs to backround images.  Making your code even faster.