I have an image carousel on my site's homepage, and sometimes a few of the images have slightly higher height and width. This causes the page elements, such as a list of test items below the carousel, to move around as each image in the carousel changes.
What is the best solution for stopping everything on the page from moving around? Should I enforce the sizing of each image on upload from the CMS? Should I force the sizing in the markup? Is there a set of CSS rules to apply to the Bootstrap Carousel to conform the images to a certain, fluid, responsive size, such that each image change results in nothing on the page moving around due to size change?
Todd, Hi there. Have a look at this post here to do with Bootstrap carousel.
There is a Fiddle with full code for you to use.
I have 4 very different sized images in a responsive carousel. The carousel does not change size when each image slides in.
You could use this to get started to have a responsive carousel.
Try resizing it to see.
Hope this helps.