0

I'm not sure if this is entirely possible, but I was wondering if there was a way to extend or analyze the left and right sides of an image's color and extend it to the full width of a container while keeping the image size intact. I'm not looking for a stretch or cover.

The left and right sides will always be the same one color, but that color would be dynamic depending on the image. The color is never explicitly defined in the CSS, so is there a way to stretch only the side pixels? If it's possible, could an example be provided?

Thank you.

Example

Bryan
  • 1,438
  • 3
  • 15
  • 24
  • 1
    I think the only way to this client-side would be the use of the `canvas`. Checkout [this SO post](http://stackoverflow.com/questions/6735470/get-pixel-color-from-canvas-on-mouseover) which asks a similar question. You would just need to to this on page load, not on mouseover but the idea should be the same. – zgood Aug 11 '16 at 21:21
  • Thanks zgood, I've checked it out but it requires quite a bit of implementation. Maybe during my spare time I'll create it from scratch. – Bryan Aug 11 '16 at 23:21

1 Answers1

0

Found an easier way using adaptive background plugins / modules.

Using JQuery

Using Javascript

Using Angular

Bryan
  • 1,438
  • 3
  • 15
  • 24