Skip to main content
K
KevinB9
Inspiring
November 19, 2017
Answered

bootstrap carousel - how to size images?

  • November 19, 2017
  • 2 replies
  • 49162 views

I am setting up my first Bootstrap carousel (slideshow) and am having trouble setting the size of the images, particularly the verticals (where the height is greater than the width). How do I style the images so that they are all contained the same size window? What element do I style - center-block, carousel-inner, item, or what?

Thanks

Kevin from Cambridge

    This topic has been closed for replies.
    Correct answer osgood_

    KevinB9  wrote

    My business is photography. I am showing my original photography. Maybe I should have explained. I am presenting landscapes, portraits, panoramas and pictures of church steeples. If they are all "cropped the same" I will end up with some awfully ill-framed photographs. In my mind photographs are not just fodder for websites.

    As I suspected, you wouldn't use the Bootstrap carosuel for this but an image gallery solution, maybe thumbnails which then open a modal overlay window which is isolated on its own so the difference in image size is not a problem...

    If you can afford to purchanse an extension maybe look at something like the below. You can see there is an example which uses different sized image in a thumbnail gallery which open a modal window when clicked on...

    Magic Box Demo

    2 replies

    Nancy OShea
    Nancy OShea
    Community Expert
    November 19, 2017

    Use Photoshop to create banners of required height & width to fit your carousel.  Crop, resize and arrange individual images on your banner canvas.  See link below for details.

    Re: how do I combine pictures in a banner?

    Nancy O'Shea— Product User & Community Expert
    O
    osgood_
    Brainiac
    November 19, 2017

    I think what the OP is trying to do is create a situation where the carousel doesn't bounce up and down when the images are different heights and the only way to do that is to create extra transparent space around the shorter ones or use some kind of sympathetic javascript which smoothly allows for the difference in height.

    I think this situation only works for an image gallery on a seperate page, not on a page which contains other elements, text etc. I don't particulary want all the text moving up and down as one traverses through the different sized images. I'm not sure how nice a lot of space around an images is going to be either, happy days!

    Nancy OShea
    Nancy OShea
    Community Expert
    November 19, 2017

    It stands to reason that if your Caroursel is 1100px by 150px, your images need to be the same size.  Having same sized images is important.   That's why I suggest making collages with mulitple images to fit the intended carousel size.

    Nancy O'Shea— Product User & Community Expert
    O
    osgood_
    Brainiac
    November 19, 2017

    KevinB9  wrote

    I am setting up my first Bootstrap carousel (slideshow) and am having trouble setting the size of the images, particularly the verticals (where the height is greater than the width). How do I style the images so that they are all contained the same size window? What element do I style - center-block, carousel-inner, item, or what?

    Thanks

    Kevin from Cambridge

    It's best to crop your images so they are all same size i.e. have the same width and height. If you dont do that you will end up with a rather 'unsightly' carousel.

    K
    KevinB9Author
    Inspiring
    November 19, 2017

    Oh, dear - I hope that's not true. Yes, my carousel is now quite unsightly with the vertical images blowing out through the bottom of the window.

    A vertical image will always have a different aspect ratio than a horizontal. They can't be cropped the same!

    Can't I try to give the verticals a separate class and then style the "height" property somehow?

    Help!

    K

      O
      osgood_
      Brainiac
      November 19, 2017

      KevinB9  wrote

      Oh, dear - I hope that's not true. Yes, my carousel is now quite unsightly with the vertical images blowing out through the bottom of the window.

      A vertical image will always have a different aspect ratio than a horizontal. They can't be cropped the same!

      Can't I try to give the verticals a separate class and then style the "height" property somehow?

      Help!

      K

      Ok, well when I build image galleries I tend to like to keep all the images the same size - I don't like images which are all different sizes, unless they are in a modal/overlay window which doesn't affect the rest of the page layout.

      You could try to set a specific height for the images, an auto width and a max-height:

      #myCarousel img {

      width: auto;

      height: 225px;

      max-height: 225px;

      }

      Bootsrap should accommodate varying heights of images unless there is a specific height been set somewhere for the carousel.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices