Streaming live at 10am (PST)

How to make image on Slider stretch without cropping

Is there any way to make a 100% width slider image stretch with the page rather the lose some the bottom of the image?

If you want a responsive image that always fills the frame, use a div with background image set to cover instead of the image widget.

I personally don’t apply a background image to the slide itself. It is better to nest a div with a background image instead - it will give you improved formatting options.

It is important to note that background images are defined as a CSS attribute, not the HTML, so before you publish your final site be sure to clean up any unused classes to prevent loading unnecessary data.


This is what I’m looking to do…

I don’t want to lose part of the image…i want to whole slider to adjust.

use images with the standard image widget. Set their width attribute to 100%. Set the slider height to auto.

1 Like