bootstrap carousel - how to size images?

[KevinB9]

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

[osgood_]

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.

[KevinB9]

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

[osgood_]

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.

[KevinB9]

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.

OK. Thanks for the suggestion. I will try it. "Height" for me has always been a forbidden city in Dreamweaver. It seems that the height always expands automatically to accommodate content. That's the problem with the carousel - image height bouncing up and down.

K

[osgood_]

KevinB9  wrote

OK. Thanks for the suggestion. I will try it. "Height" for me has always been a forbidden city in Dreamweaver. It seems that the height always expands automatically to accommodate content. That's the problem with the carousel - image height bouncing up and down.

K

It's ok to set a height for the images in this situation, the problem with height arises if you try and restrict content to a specifically set height container. You're not setting the height of the container that the images will appear in so the container will just adjust to the height of the images, which are all set at a max-height, the width of the image will vary, as it's set to auto....

[KevinB9]

OK. I am going to answer my own question here, although this is really not such a great solution.

What I could do is change the canvas size in Photoshop and create a new horizontal format. The vertical image would be in the middle with blank space on the sides.

I haven't tried this yet but it should work.

This will create a lot of work for me. I wish there was a way to style the verticals differently in CSS.

Kevin

[KevinB9]

Thank you for all suggestions. I know they were made in good faith. Thank you, thank you.

To the poster who said that "all photos should be cropped the same" - that's like saying that all restaurants should serve chicken wings as an appetizer whether you like it or not . . .

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.

to be continued . . .

Kevin

[Nancy OShea]

Have you looked at Adobe Portfolio -- free with your creative cloud membership?  It's a very popular  venue for photographers.   The Photo Grid is well suited for displaying images in different aspect ratios.  See below for examples of what you can do with no coding skills.

1. https://help.myportfolio.com/hc/en-us/articles/115003634308-What-is-a-Photo-Grid-and-how-do-I-create...
2. https://medium.com/behance-blog/introducing-photo-grids-on-behance-adobe-portfolio-4c93cd800ad4

[KevinB9]

Nancy - thank you. I will check out these resources.

Kevin

[osgood_ · Accepted solution]

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

[Nancy OShea]

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?

[osgood_]

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]

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 OShea]

Maybe a Carousel is the wrong course of action here. 

A thumbnail gallery that supports both portrait and landscape images might be a better fit (pun intended).

Or perhaps a  mosaic or Photo Grid layout.

Bootstrap Image Gallery with Responsive Grid