0

I have a JS fiddle here: http://jsfiddle.net/WLggG/4/

Resize the result pane so the text is longer than the image.

I have an Owl Carousel in place of the image on my real web page - is there a way to get the slider images to scale, centre and crop to fill it's parent?

Or does anyone know of a jQuery slider that provides this functionality?

Maybe a slider than inserts the image into an inline style tag so it can be controlled using background-size: cover;?

I've noticed lots of questions/answers that relate to <img> tags but none of the solutions work with Owl Carousel.

Any help would be much appreciated.

Cheers

CMSCSS
  • 2,076
  • 9
  • 28
  • 49
  • I'm beginning to suspect this is impossible with a responsive design where you don't know the height and width. Have tried implementing this but with no luck: http://stackoverflow.com/questions/11552380/how-to-automatically-crop-and-center-an-image – CMSCSS Jun 03 '14 at 21:48
  • Have also been experimenting with this technique: http://jsfiddle.net/WLggG/8/ The idea is to insert a copy of the image into an inline style tag on ````.hero-image````, use ````background-size: cover;```` and set the actual image to ````opacity: 0;```` so it's still on the page for seo etc. But the background image doesn't show up for some reason. – CMSCSS Jun 04 '14 at 03:49
  • Dumb error on the style tag - works with a single image here: http://jsfiddle.net/WLggG/10/ Now onto figuring out with a slider. – CMSCSS Jun 04 '14 at 04:03
  • OK, so this is where I'm at - anyone know how to force the ````.slide```` div to be 100% of it's parent? http://jsfiddle.net/WLggG/22/ If that's possible, then the inline background image should expand and crop properly. – CMSCSS Jun 04 '14 at 20:29

0 Answers0